【HTML+CSS学习之基础知识】css选择器

本文链接：https://blog.youkuaiyun.com/logic042/article/details/81176227

选择器：每一条css样式声明（定义）由两部分组成，形式如下：
选择器{
样式；
}
在{}之前的部分就是选择器，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的那些元素。比如代码中的“body”“p”就算是选择器

标签选择器：例如 、<html>、<body>、<hx>等

类选择器：代码格式： .类选择器名称{css样式代码;}
注意：
1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文）
使用方法：
第一步：使用合适的标签把要修饰的内容标记起来，如下：
胆小如鼠
第二步：使用class="类选择器名称"为标签设置一个类，如下：
胆小如鼠
第三步：设置类选器css样式，如下：
.stress{color:red;}/*类前面要加入一个英文圆点*/

id选择器：代码格式： #id选择器名称{css样式代码;}
用法与类选择器类似

类选择器与id选择器的区别
相同点：可以用于任何元素
不同点：
1.类选择器在一个文件中可以使用多次，但是id选择器在一个文件中只能使用一次
2.使用类选择器词列表方法可以为一个元素同时设置多个样式，我们可以为一个元素设置多个样式，但只可以用类选择器，不可以用id选择器。
例如：
.setcolor{
color:blue;
}
.setsize{
font-size:25px;
}
你好，我是<span class="setcolor

setsize">logic，我希望我们可以一起学习。

子选择器：子选择器（大于符号）（>）用于指定选择指定标签元素的第一代子标签
例如：
.set>span{border:1px solid red;}
代表的是将class名为set下的子元素span加入红色实线边框。

包含（后代）选择器：加入空格，用于选择指定标签元素下的后辈元素
例如：
.first span{color:red;}

请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

通用选择器：代码示例： *{color:red;} /*它的作用是匹配html中的所有标签元素，并将他们的字体颜色变为红色*/

伪类选择符：它允许给html并不存在的标签（标签的某种状态）设置样式
例如： a:hover{color:red} /*作用为在鼠标滑过时字体颜色变红*/
/*注意：目前的可以兼容所有浏览器的“伪类选择符”仅有"a:hover" 理论上css3中有许多的伪类选择符，但是并不能兼容所有的浏览器，:hover理论上可以放在任何标签上，例如p:hover,但兼容性依旧不是很好*/

分组选择符：为多个标签元素设置同一个样式，可以使用分组选择符（,）
例如：h1,span{color:red;} /*对<h1>和标签内的字体颜色设置为红色*/
/*相当于两行代码
h1{color:red;}
span{color:red;}
*/