5. CSS选择器

Class 和 Id 的使用场景

Class:一个标签可以有多个class且同一个class可以被多个标签共同使用。这样便于在CSS中集体控制样式。
ID：一个标签只能有一个ID且不同标签ID不可相同，具有唯一性，在CSS中针对性控制样式。

CSS选择器常见的有几种

CSS中常见的选择器有：基础选择器、组合选择器、属性选择器、伪类选择器、伪元素选择器，5种。

基础选择器

选择器	功能
*	通用元素选择器，匹配页面任何元素
#id	id选择器，匹配特定id的元素
.class	类选择器，匹配class包含特定类的元素
element	标签选择器

组合选择器

选择器	功能
E,F	多元素选择器，用“，”分隔，同时匹配元素E或元素F
E F	后代选择器，用空格分隔，匹配E元素所有子元素及其后代元素F
E>F	子元素选择器，用>分隔，匹配E元素的所有直接子元素
E+F	直接相邻选择器，匹配E元素之后的相邻的同级元素F
E~F	普通相邻选择器，匹配E元素之后的同级元素F（无论直接相邻与否）

.class1.class2或element#id，没有间隔符号，自身的“.”或“#”充当，表示既···又···

属性选择器

选择器	功能
E[attr]	匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div
E[attr = value]	匹配属性attr值为value的元素，div[id=test],匹配id=test的div
E[attr ~= value]	匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
E[attr ^=value]	匹配属性attr的值以value开头的元素
E[attr $=value]	匹配属性attr的值以value结尾的元素
E[attr *=value]	匹配属性attr的值包含value的元素

伪类选择器

功能	选择器
E:link	匹配所有未被点击的链接
E:visited	匹配所有已被点击的链接
E:hover	匹配鼠标悬停其上的E元素
E:active	匹配鼠标已经其上按下、还没有释放的E元素
E:focus	匹配获得当前焦点的E元素
E:lang(c)	匹配lang属性等于c的E元素
E:enabled	匹配表单中可用的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio或checkbox元素
E::selection	匹配用户当前选中的元素
E:first-child	匹配作为长子（第一个子女）的元素E
E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)	匹配其父元素的倒数第n个子元素，第一个编号为1
E:first-of-type	匹配其父元素下所有同种标签中的第一个子元素
E:nth-of-type(n)	与:nth-child()作用类似，但是仅匹配使用同种标签的元素

伪元素选择器

选择器	功能
E::first-line	匹配E元素内容的第一行
E::first-letter	匹配E元素内容的第一个字母
E::before	在E元素之前插入生成的内容
E::after	在E元素之后插入生成的内容

选择器的优先级

优先级由高到低：(注：继承的优先级最低)

!important：在属性后面使用，会覆盖页面内任何位置定义的元素样式
内联样式：作为style属性写在标签上的
id选择器（#ID）
class选择器（.class）
伪类选择器（a:hover）
属性选择器（E[attr]）
标签选择器（
）
通用元素选择器
浏览器自定义

复杂场景
首先
行内样式
==> a
ID 选择器 ==> b
类，属性选择器和伪类选择器 ==> c
标签选择器、伪元素 ==> d
然后：
a>b>c>d
同级则比较数目
再次声明！继承的优先级最低！
例：
如图，加了“！important”的id选择器样式被标签选择器覆盖了

ID选择器样式被覆盖.png

这是因为id选择器只是给它的父元素给字体大小，里面的子元素可以继承，而属性的继承优先级是最低的，所以被覆盖了。
此时审查元素，

审查元素.png

发现字体大小已经被划掉了，同时注意标题inherited from ——继承自。
以上。

同类标签对同一元素进行样式操作，后面的覆盖前面的。

a标签的伪类选择器的定义、顺序及原因

定义：同类标签对同一元素进行样式操作，后面的覆盖前面的。
正确顺序：

a:link {
    color: blue;
}
a:visited {
    color: black;
}
a:hover {
    color: yellow;
}
a:active {
    color: red;
}

解释：
未进行任何操作，为link；点击过后，为visited；鼠标悬停，为hover；点击时刻，为active。
根据原则，link应为最上面的，否则，会持续覆盖其上面的其他样式。
若链接已点击过，而visited又在active或hover下面，会导致对应样式被覆盖，故visited应排第二。
若hover在active下面，则会出现情况：当点击时，鼠标同时悬浮在链接上，此时想要的情况是：点击时看到链接变黄色。但由于下覆盖上，无法得到效果，故hover在active之上，排第三。
综上，从上到下依次为：link——visited——hover——active。

以下选择器含义

选择器	含义
#header { }	匹配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:hover"的后代元素，其中"a:hover"表示鼠标悬停在链接处的状态
#header .logo~p { }	匹配ID为header的元素的后代元素，且为"class=logo"元素之后相邻的标签为p的元素
#header input[type="text"] { }	匹配ID为header的后代元素，且为 type="text"的input元素

辨析

释意
div:first-child：匹配作为长子（第一个子女）的div。
div:first-of-type：匹配其父元素下使用同种标签的第一个div元素。
div :first-child：匹配div下的后代元素，且为每个父元素下的第一个子元素。
div :first-of-type：匹配div下的后代元素，且为每个父元素下使用同种标签的第一个子元素。
实例
div:first-child

1.png

如图，①div-1系列全红，说明有“遗传性”；②div-2中只有2-1红，说明是每级第一个；③div-3中全黑，说明不是同类第一而应是父标签下第一（且为div标签）。即匹配作为长子（第一个子女）的div。

div:first-of-type

2.png

如图，与div:first-child相比，div-3-1变红，说明这个是各级div中同类型第一个。即匹配其父元素下使用同种标签的第一个div元素。
div :first-child

3.png

如图，与div:first-child相比，第一组只有1-1红，第三组span变红。说明匹配的是div下的后代元素，且为每个父标签下的第一个子元素（不限制类型）。

div :first-of-type

4.png

如图,与div :first-child（注意空格）相比，3-1变红。说明匹配的是div下的后代元素，且为每个父元素下使用同种标签的第一个子元素。

解释下图代码展示的效果

最后一题效果图.png

    .item1:first-child {
        color: red;
    }

匹配class="item1"的父元素（div class="ct"）下的第一个且类是.item1的子元素，即p class="item1"，故只有aa变红。

    .item1:first-of-type {
        background: blue;
    }

匹配class="item1"的父元素（div class="ct"）下，类是.item1且为每种标签第一个的子元素，即p标签的第一个（p class="item1"）和h3标签的第一个（h3 class="item1"），故aa和bb都有蓝色背景。