前端必备技能：掌握CSS选择器及其优先级

前言

CSS选择器是CSS用于选择HTML元素并应用具体样式属性的语法。CSS选择器有许多种类型，本文会详细列举所有的选择器并举例说明具体用法以及CSS选择器权重计算和CSS生效属性分析。

CSS 选择器

1. 标签选择器

通过标签名称选择元素，如p选择所有段落元素。

<p>选择器</p>

p {
 color: red;
}

2. 类选择器

通过类名选择元素，如.example选择所有类名元素为example的元素。

<p class="example">选择器</p>

.example {
 color: red;
}

3. ID选择器

通过ID选择元素，如#example选择ID为example的元素。

<p id="example">选择器</p>

#example {
	color: red;
}

4. 属性选择器

通过DOM属性及值选择元素，如[type=”submit”]选择所有type属性值为text的元素；

<button type="submit">提交</button>

[type="submit"] {
	backgroud-color: red;
}

5. 伪类选择器、not()伪类选择器

通过元素的特定状态下选择元素，如:hover选择鼠标悬停在DOM的属性；

<p>选择器</p>

p:hover {
	color: red;
}

6. 子选择器

选择一个元素的直接子元素；

<ul>
	<li>选择器</li>
</ul>

ul > li {
	color: red;
}

7. 后代选择器

选择一个元素的后代元素；

<div>
	<p>选择器</p>
</div>

div p {
	color: red;
}

8. 相邻兄弟选择器

选择紧接在另一个元素后面的兄弟元素；

<div>
	<h1>选择器标题</h1>
	<p>选择器</p>
</div>

h1 + p {
	color: red;
}

9. 通配符选择器

使用（*）作为选择器，表示匹配HTML中所有的元素。通配符选择器一般只会在特殊情况下使用，比如需要对全局样式进行重置时。

* {
	color: red;
}

CSS 选择器优先级

之所以涉及到选择器优先级问题，是因为在同一个DOM元素上设置多个CSS选择器并且设置了不同的CSS属性，CSS选择器优先级最高的选择器对应的CSS属性就是DOM最终生效属性。

CSS选择器优先级的规则：

1. 选择器权重
   不同的选择器的权重是不同的，具体的权重分数详情如下
   ID选择器的权重为100；
   类选择器、属性选择器、伪类选择器的权重为10；
   标签选择器的权重为1；
   通配符选择器、子选择器、相邻选择器、后代选择器、:not()伪类选择器权重为0；

组合每个选择器的权重并求和，最终值最高的选择器生效。

例子

#example .example-class p:first-child {
  color: red;
}

ID选择器 #example：100

类选择器 .example-class：10

标签选择器 p：1

伪类选择器 :first-child：1

选择器权重求和：100 + 10 + 1 + 1 = 112。

1. !important关键字
   用于强制将样式应用在DOM元素上，其优先级非常高，可以覆盖其他选择器应用的样式。
   当多个样式声明都适用了!important时，他们优先级是相同的，后面的样式声明会覆盖前面的样式声明。