CSS选择器

1.class 和 id 的使用场景?

id选择器：每个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上；
class选择器：每个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时；

属性选择器	含义
E[attr]	匹配所有属性为attr的元素
E[attr=value]	匹配属性attr为value的元素
E[attr~=value]	匹配所有属性为attr具有多个空格分隔，其中一个值为value的元素
E[attr*=value]	匹配属性attr的值包含value的元素

组合选择器	含义
E,F	多元素选择器，用,分隔，同时匹配元素E或元素F
E F	后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
E>F	子元素选择器，用>分隔，匹配E元素的所有直接子元素
E+F	直接相邻选择器，匹配E元素之后的相邻的同级元素F
E~F	普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
.class1.class2	id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素
element#id	id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素

复杂场景时，计算优先级时通过数标签来计算，先数id，如果id相等再数类，如果id不相等，id多的选择器权重高，权重越高，优先级越高。如果id选择器数量相同，再数类选择器，最后数标签。

a:link
a:visited
a:hover
a:active
原因：

当鼠标移动到a标签上，此时与标签颜色相关的选择器有：a:link,a:visited,a:hover,这三个选择器拥有相同的优先级，但是被写在最后的选择器会覆盖掉之前的选择器，因此要想实现“当鼠标移动到a标签上变换颜色”的效果，需要将a:hover置于 a:link 和 a:visited 之后
当鼠标点击a标签，此时与标签颜色相关的选择器有：a:link,a:visited,a:hover和a:active，这四个选择器拥有相同的优先级，但是被写在最后的选择器会覆盖掉之前的选择器，因此要想实现“当鼠标点击a标签时变换颜色”的效果，需要将a:active置于a:link,a:visited,a:hover 之后。

选择器的样式	含义
#header{ }	id选择器，匹配id="header"的元素
.header{ }	类选择器，匹配class="header"的元素
.header .logo{ }	后代选择器，匹配class="header"元素的后代元素中class="logo"的元素
.header.mobile{ }	类选择器，匹配class="header mobile"的元素
.header p, .header h3{ }	多元素选择器，匹配class="header"元素的后代p元素和后代h3元素
#header .nav>li{ }	多元素选择器，匹配id="header"元素的后代class="nav"元素的直接后代li元素
#header a:hover{ }	伪类选择器，匹配id="header"元素的后代a元素鼠标悬浮在其表面时的样式

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。

aa

bb

ccc

.item1:first-child{
color: red;
}
这会让aa变成红色；

.item1:first-of-type{
background: blue;
}
这会让aa和bb都变成蓝色。