CSS 选择器对 HTML 页面中的元素实现一对一，一对多或者多对一的控制，从而给指定元素添加样式。同时还要考虑一个元素被赋予多个样式时如何生效的问题，这个就和选择器优先级相关了。
优先级是基于不同种类选择器组成的匹配规则。浏览器通过优先级来判断哪些样式与一个元素最为相关，从而在该元素上应用这些样式。
二、CSS 选择器的分类 三、不同种类选择器的用法 接下来我们看一看基本选择器之外的其他选择器。
属性选择器（通过已经存在的属性名或属性值匹配元素）
[title]
[class=div1]
[attr~=attr-test2]
[attr^=te]
[attr$=Test]
[attr*=test3]
[attr|=attr1]
attr*=test5 i
复制代码
- 动态伪类（多用于超链接的样式）
超链接
复制代码
注：伪类 active 在 IOS 系统下存在兼容问题，具体解决办法可参考 IOS 伪类 active 兼容问题
- 目标伪类、否定伪类、语言伪类
目标伪类 :target
目标伪类: 这是 div1
目标伪类: 这是 div2
否定伪类 :not
否定伪类: 这是 p1
否定伪类: 这是 p2
语言伪类 :lang
语言伪类: 这是 en
语言伪类: 这是 zh
复制代码
- 结构伪类
这是 p1
这是 p2
这是 p3
这是 p4
class="span1">这是 span1
class="span2">这是 span2
这是 p5
这是 strong
复制代码
- UI 元素伪类
复制代码
div1
div2
div3
div4第一行
div4第二行
div5
- item1
- item2
- item3
div6
复制代码
- 一个选择器中只能使用一个伪元素
- CSS3 中伪元素应该用双冒号，以便区分伪元素和伪类。但是旧版的规范未做明确区分，所以大多数浏览器中支持部分伪元素使用单双冒号两种写法
div1
class="span1">span1
class="span1-1">span1-1
div2class="span2">span2
div3class="span3">span3
div4class="span4">span4
div5class="span5">span5
div6class="span6">span6
div7class="span7">span7
div8class="span8">span8
复制代码
基本选择器的优先级是：!important > 内联 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器。那么它如何计算的呢？有这样一个计算表格
|选择器|示例|权重值| |:----:|:----|:----:|:----|:----:|:----| |!impotant|color: #fff !important;|正无穷| |内联选择器|
样式作用元素
|1 0 0 0| |ID 选择器|#id|1 0 0| |类选择器、属性选择器、伪类选择器|.class|1 0| |标签选择器、伪元素选择器|div|1| |通用选择器|*|0| |继承属性|
样式作用元素
|-1|
假设在一个拍卖会上，有以下几种筹码：
* 一个`内联样式`相当于一千元 * 一个`ID 选择器`相当于一百元 * 一个`类选择器`相当于十元; * 一个`标签选择器`相当于一元 * 通用选择器为零元 复制代码
每出现一个上述选择器，就增加对应筹码的钱数，最终采用出钱最多的样式。但是，这里的钱数计算方法和生活中的计算方法不一样，这里的"单位"不会因为值的累加而进行换算。 例如十个一百只能是‘十百’，仍然小于一千。
基本选择器
Hello word!
Hello word!
Hello word!
Hello word!
复制代码
Hello word!
p1
p2
p3
class="span1">span1
复制代码
注：
- 权重值相同时，写在后面的样式生效
- !important 是 CSS 选择器中的一个"流氓"属性，不论选择器的权重或者优先级的高低，只要加上 !important，那么这个样式的优先级就是最高的
- 如果针对同一元素样式存在冲突且同时存在 !important ，那么选择器总权重值高者生效
选择器的权重值最高就一定会生效吗？不一定哦~
这是 div1
这是 p1
复制代码
注：对于一些互斥的样式，例如 max-width 与 width，选择器的权重值再高也是无能为力的。
五、总结 如你所见，CSS 选择器也是暗藏玄机的哦。不过到目前为止，暂时没有能够通过元素选择其父元素或其父元素相关元素的选择器，这就让人很是头疼。
作者：政采云前端团队
链接：https://juejin.cn/post/6953405751104634916
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
