选择器的优先级和CSS三大特征

选择器的优先级

通过 不同的选择器 ，选中 相同的元素 ，并且为 相同的样式名 设置 不同的值 时，就发生了样式的冲突。

到底应用哪个样式，此时就需要看 优先级 了。

一、简单描述

行内样式 > ID 选择器 > 类选择器 > 元素选择器 > 通配选择器 。

二、详细描述

1.计算方式：每个选择器，都可计算出一组权重，格式为： (a,b,c)

a : ID 选择器的个数。

b : 类、伪类、属性 选择器的个数。

c : 元素、伪元素 选择器的个数。

例如：

选择器	权重
ul>li	(0,0,2)
div ul>li p a span	(0,0,6)
#atguigu .slogan	(1,1,0)
#atguigu .slogan a	(1,1,1)
#atguigu .slogan a:hover	(1,2,1)

2. 比较规则：按照 从左到右 的顺序，依次比较大小，当前位胜出后，后面的不再对比，例如：

(1,0,0) > (0,2,2)

(1,1,0) > (1,0,3)

(1,1,3) > (1,1,2)

3. 特殊规则：

1. 行内样式 权重大于 所有选择器 。
2. !important 的权重，大于 行内样式 ，大于 所有选择器 ， 权重最高！

---

CSS三大特性

1.层叠性

概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）。 什么是样式冲突？ ——— 元素的同一个样式名，被设置了不同的值，这就是冲突。

2. 继承性

概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。

规则：优先继承 离得近 的。

常见的可继承属性： text - ?? ， font - ?? ， line - ?? 、 color ......

备注：参照 MDN 网站，可查询属性是否可被继承。

3. 优先级

简单聊： !important > 行内样式 > ID 选择器 > 类选择器 > 元素选择器 > * > 继承的样 式。

详细聊：需要计算权重。

计算权重时需要注意：并集选择器的每一个部分是分开算的！