简介
说明
本文介绍CSS的选择器用法。包括：优先级，基本选择器，分组选择器，层次选择器，伪类选择器，伪元素选择器。
官网
CSS 选择器 - CSS（层叠样式表） | MDN
选择器优先级
简介
说明
CSS选择器的优先级关系是：内联 > ID选择器 > 类/属性/伪类 选择器 > 标签/伪元素 选择器。
详解
CSS优先级由0, 0, 0, 0这样的特殊值来表示，计算规则是左大右小。举个例子：1, 0, 0, 0 > 0, 99, 99, 99。特殊值越大，优先级越高。
样式类别 | 值 |
内联样式 | 1, 0, 0, 0 |
ID选择器 | 0, 1, 0, 0 |
类/属性/伪类 选择器 | 0, 0, 1, 0 |
标签/伪元素 选择器 | 0, 0, 0, 1 |
通配选择器（*） | 0, 0, 0, 0 |
注意：属性后插有 !important 的属性拥有最高优先级。若同时插有 !important，则再利用上班的规则判断优先级。
来源：《CSS REFACTORING》 ：
A specificity is determined by plugging numbers into (a, b, c, d):
- If the styles are applied via the style attribute, a=1; otherwise, a=0.
- b is equal to the number of ID selectors present.
- c is equal to the number of class selectors, attribute selectors, and pseudoclasses present.
- d is equal to the number of type selectors and pseudoelements present.
其他计算优先级的方法（不推荐这种方法）
另外一种方法是：权重用数字来计算，选择器的权重计算是将构成的选择器的权重值相加。
选择器名称 | 权重数值 |
! important | 正无穷 |
行间样式 | 1000 |
id | 100 |
class / 属性 / 伪类 | 10 |
标签 / 伪元素 | 1 |
通配符 | 0 |
CSS中的权重是256进制的，这就意味着1和0之间相差的并非1，而是256。
#id-div p{
background-color: red;
}上面这行代码，存在id选择器与标签选择器，但是他们两个构成了并列选择器，这个选择器的权重计算是将构成的选择器的权重值相加。比如在这段代码里，id选择器的数值为100，而标签选择器的数 值为1，那么这个并列选择器的权重值就为”100+1”，也就是101。
还有一点我们要注意的是，CSS里的! important是正无穷，在数学中，正无穷+1 = 正无穷，但在编程语言中，正无穷+1就是比正无穷大。
示例
<html>
<head>
<meta charset="UTF-8">
<title>
CSS优先级计算规则
</title>
<style>
p {color: red;} /* 样式1：元素选择器，特殊值：0,0,0,1 */
div P {color: orange;} /* 样式2：元素选择器+元素选择器，特殊值0,0,0,2 */
.yellow-p {color: pink;} /* 样式3：类选择器，特殊值0,0,1,0 */
div .yellow-p {color: green;} /* 样式4：元素选择器+类选择器，特殊值0,0,1,1 */
.purple {color: purple;} /* 样式5：类选择器，特殊值0,0,1,0 */
#blue1, #blue2, #blue3 {color: blue;} /* 样式6：ID选择器，特殊值0,1,0,0 */
.red {color: red !important;} /* 样式6：!important优先级最高 */
</style>
</head>
<body>
<p>这条应该是红色。（对应“样式1”）</p>
<div>
<p>这条应该是橙色。（对应“样式2”）</p>
</div>
<p class="yellow-p">这条应该是粉红色（对应“样式3”）</p>
<div>
<p class="yellow-p">这条应该是绿色（对应“样式4”）</p>
<p class="yellow-p" id="blue1">这条应该是蓝色（对应“样式6”）</p>
<p class="yellow-p" id="blue2" style="color:purple">行间样式，这条应该是紫色</p>
</div>
<p class="yellow-p purple">这条应该是紫色，特殊值一样，后来居上（对应“样式5”）</p>
<p id="blue3" class="red" style="color:purple">这条应该是红色。!important优先级最高（对应“样式6”）</p>
</body>
</html>
结果
分类
CSS3选择器分类如下图所示：
基本选择器
选择器 | 类型 | 功能描述 | 示例 |
* | 通配选择器 | 匹配文档中所有HTML元素（标签）。 一般会省略：*.class与.class是一样的。 | * { margin:0; padding:0; } |
E | 元素选择器 | 匹配指定类型的HTML元素（标签）。 | p { font-size:2em; } //p标签 |
#idName | ID选择器 | 匹配指定ID属性值为“idName”的任意类型元素 | #info { background:#ff0; } //id为'info'的元素 p#info { background:#ff0; } //p标签，且id为'info'的元素 |
.className | 类选择器 | 匹配指定class属性值为“className”的任意类型的任意多个元素 | .info { background:#ff0; } //class有'info'的元素 p.info { background:#ff0; } //p标签，且class有'info'的元素 p.info.error { color:#900; font-weight:bold; } |
见下方 | 属性选择器 | 将每一个选择器匹配的元素集合并 | [title] { color:#f00; } p[title] { color:#f00; } div[class=error] { color:#f00; } td[headers~=col1] { color:#f00; } p[lang|=en] { color:#f00; } blockquote[class=quote][cite] { color:#f00; } |
属性选择器
选择器 | 功能描述 |
[attribute] | 匹配带有指定属性的元素。 |
[attribute=value] | 匹配带有指定属性和值的元素。 |
[attribute~=value] | 匹配属性值中包含指定词汇的元素。 |
[attribute|=value] | 匹配带有以指定值开头的属性值的元素，该值必须是整个单词。 |
[attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
[attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
[attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
注意
需要value的选择器，value必须是全名称才会匹配，例如：
<p lang="english">This is english</p>
p[lang |= en]不匹配。p[lang |= english]匹配
value外边加不加引号都可以。例如：
<p lang="english">This is english</p>
p[lang |= "english"]和p[lang |= english]都匹配
分组选择器
,（逗号）是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。
语法：A, B
示例：div, span //匹配 <span> 元素或 <div> 元素。
层次选择器
选择器 | 类型 | 功能描述 | 示例 |
空格 | 后代选择器 （包含选择器） | 选择前一选择器的子代为后一选择器的节点。。 （可选择子选择器的子选择器） | div span 匹配 <div> 元素内的所有 <span> 元素。 #idA span 匹配 id为"idA" 元素内的所有 <span> 元素。 |
> | 直接子代选择器 | 选择前一元素的直接子代为后一选择器的节点。 （不可选择子选择器的子选择器） | div > h2 匹配直接在 <div> 元素内的所有 <h2> 元素 |
+ | 相邻兄弟选择器 | 后一选择器紧跟在前一选择器之后，且共享同一个父节点 | h2 + p 匹配所有紧邻在 <h2> 元素后的 <p> 元素 |
~ | 通用选择器 | 后一个选择器在前一个选择器后面的任意位置，并且共享同一个父选择器。 | p ~ span 匹配同一父元素下，<p> 元素后的所有 <span> 元素 |
|| | 列组合选择器 | 选择属于某个表格行的节点。 | col || td 匹配所有 <col> 作用域内的 <td> 元素 |
伪类选择器
简介
伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。
它们表现得像是向你的文档的某个部分应用了一个类一样，帮你在标记文本中减少多余的类，让代码更灵活、更易于维护。
下边所有的选择器前边都可以加一个元素名，例如：p:focus //表示获得焦点的p元素。
动态
选择器 | 功能描述 |
:link | 匹配被定义了超链接并未被访问过的元素。常用于链接锚点上 |
:visited | 匹配被定义了超链接并已被访问过的元素。常用于链接锚点上 |
:active | 匹配被激活的元素。常用于链接锚点和按钮上 |
:hover | 匹配用户鼠标停留的元素。IE6及以下浏览器仅支持a:hover |
:focus | 匹配素获取焦点的元素 |
:focus-within | 表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配 :focus 伪类。（shadow DOM 树中的后代也包括在内） |
目标
选择器 | 功能描述 |
:target | 匹配被相关URL指向指向的元素。 |
UI元素状态
选择器 | 功能描述 |
:checked | 匹配选中的复选按钮或者单选按钮表单元素 |
:enabled | 匹配所有启用的表单元素 |
:disabled | 匹配所有禁用的表单元素 |
:default | 表示一组相关元素中的默认表单元素。 |
:invalid | 表示任意内容未通过验证的 <input> 或其他 <form> 元素 |
:required | 表示任意设置了required属性的<input>，<select>, 或 <textarea>元素。 这个伪类对于高亮显示在提交表单之前必须具有有效数据的字段非常有用。 |
:optional | 表示任意没有required属性的 <input>，<select> 或 <textarea> 元素。 |
:indeterminate | 表示状态不确定的表单元素 |
结构
选择器 | 功能描述 |
:first-child | 表示在一组兄弟元素中的第一个元素。与E:nth-child(1)等同 |
:last-child | 代表父元素的最后一个子元素。与E:nth-last-child(1)等同 |
:root | 匹配文档树的根元素。 对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。 |
:nth-child(an+b) | 首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...） |
:nth-last-child(an+b) | 从兄弟节点中从后往前匹配处于某些位置的元素。和 :nth-child 基本一致, 但它从结尾计数. |
:nth-of-type(an+b) | 针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。 |
:nth-last-of-type(an+b) | 匹配那些在它之后有 an+b-1 个相同类型兄弟节点的元素，其中 n 为正值或零值。它基本上和 :nth-of-type 一样，只是它从结尾处反序计数 |
:first-of-type | 表示一组兄弟元素中其类型的第一个元素。与E:nth-of-type(1)等同 |
:last-of-type | 表示在（它父元素的）子元素列表中，最后一个给定类型的元素。与E:nth-last-of-type(1)等同 |
:only-child | 匹配没有任何兄弟元素的元素。 等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1)。当然,前者的权重会低一点 |
:only-of-type | 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。 |
:empty | 代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。注释或处理指令都不会产生影响。 |
注意
（1）“ul>li:nth-child(3)”表达的并不是一定选择列表ul元素中的第3个子元素li，仅有列表ul中第3个li元素前不存在其他的元素，命题才有意义，否则不会改变列表第3个li元素的样式。
（2）nth-child(n) 中参数只能是n，不可以用其他字母代替。
（3）nth-child(odd) 选择的是奇数项，而使用:nth-last-child(odd) 选择的却是偶数项
否定
其他网址
选择器 | 功能描述 |
:not(selector) | 匹配选择器selector之外的的元素。 |
其他
选择器 | 功能描述 |
:defined | 表示任何已定义的元素。这包括任何浏览器内置的标准元素以及已成功定义的自定义元素 |
:host | 表示包含其内部使用的CSS的shadow DOM的根元素 - 换句话说，这允许你从其shadow DOM中选择一个自定义元素。 |
:in-range | 表示一个 <input> 元素，其当前值处于属性min 和max 限定的范围之内 |
:out-of-range | 表示一个 <input> 元素，其当前值处于属性 min 和 max 限定的范围外。 |
:lang(xx) | 基于元素语言来匹配页面元素。 |
:left | 必须与@规则 @page 配套使用, 对打印文档的左侧页设置CSS样式. |
:right | 必须与@规则 @page 一起配套使用，表示打印文档的所有右页。 |
:read-only | 表示元素不可被用户编辑的状态（如锁定的文本输入框）。 |
:read-write | 代表一个元素（例如可输入文本的 input元素）可以被用户编辑。 |
:scope | 表示作为选择器要匹配的参考点的元素。 |
伪元素选择器
其他网址
CSS 选择器 - CSS（层叠样式表） | MDN
简介
伪元素和伪类类似，不过看起来像往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::。
一些早期的伪元素曾使用单冒号的语法，所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素。
伪元素选择器用于表示无法用 HTML 语义表达的实体。也可以用于表示属性键为psudo的值，例如：<input type="range">，其会生成shadow DOM：
此时，这个CSS可以将滑块轨道变红：
input::-webkit-slider-runnable-track {
background: red;
}语法：两个冒号::。双冒号这个语法从CSS3引入，为了区分伪类与伪元素，CSS2及之前都是单冒号。CSS3的伪元素基本都可以使用单冒号替代双冒号来使用CSS2语法。
属性
属性 | 描述 | 示例 |
在元素之后添加内容。 常通过 content 属性为一个元素添加修饰性内容。默认为行内元素。 | /* Add an arrow after links */ | |
在元素之前添加内容。 常通过 content 属性为一个元素添加修饰性内容。默认为行内元素。 | /* Add a heart before links */ | |
::cue | 匹配所选元素中的WebVTT提示。 可用于在VTT轨道的媒体中使用字幕和其他线索。 | |
匹配块级元素的第一行。 | p::first-line { text-transform: uppercase; } | |
匹配块级元素的第一行第1个字母。 | p::first-letter { text-transform: uppercase; } | |
匹配被用户高亮的部分（比如使用鼠标选中的部分） | ::selection { background-color: cyan; } | |
匹配那些被放在 槽(slot) 中的元素 | ::slotted([name="title"]) { font-weight: bold; } |
