【CSS】样式的优先级(特指度)
rabbit.jpg
优先级的出现是为了解决CSS样式冲突的问题。
以下两种情况会导致样式冲突：
-
继承，从多个祖辈那里继承相同的属性。
-
同一个元素有多个样式（例如为某个段落定义了类样式，又定义了<p>标签样式，此时这两个样式都会应用到那个段落上）。
CSS继承是为了确保相关的元素具有相似的格式，避免分别为页面中的每个标签定义样式。
要搞清继承问题，最重要的原则是：在相同特指度的情况下，最近的祖辈胜出。
简单来说，如果没有专门为标签定义样式，继承的属性出现冲突时，最近的祖辈胜出。
根据“最近的祖辈胜出”这条规则，可以推理出：直接应用在标签上的样式胜出。
也就是说，标签专用样式里的属性会几百所有继承的属性。
例如：<body>、<p>和<strong>标签都设置了颜色，<p>标签样式比<body>标签样式具体，<strong>标签样式则比<body>和<p>标签的样式都具体。<strong>标签样式只作用在<strong>标签上，而且会覆盖从其他标签继承的有冲突的属性。
一个标签，多个样式
如果有多个相同属性的样式作用在一个标签上，浏览器选择哪个样式，是视情况而定的。
根据样式的类型，以及定义各个样式的顺序，浏览器一次可能会使用一个或多个样式。以下是一次使用多个样式的几种常见情况：
- 使用标签选择符定义了样式，又把类样式应用到标签上。
- 相同的样式在样式表中出现多次。
- 既有类样式，又有ID样式的标签。
- 一个网页用到多个样式表，而且各个样式表中都有名称相同的样式。这些名称相同的样式可以在外部样式表中，也可以在内部样式表中。或者在网页链接的多个外部样式表中。
- 多个复杂的选择符选取相同的标签。
如果一个元素有多个样式，Web浏览器会合并这些样式里的属性，不过前提是，样式之间没有冲突。
如果样式之间存在冲突，Web浏览器最终选择应用在元素上的样式，会根据特指度来选择。
特指度：确定哪个样式胜出
特指度是CSS提供的一个公式，根据赋给各种选择符（标签选择符，类选择符，ID选择符等）的值计算样式的特指度。计算得到的值越大，特指度越高。在发生冲突时，Web浏览器会选择特指度最高的那个。
赋给各种选择符的值如下：
- 一个标签选择符 1分
- 伪元素 1分
- 一个类选择符 10分
- 伪类 10分
- 一个ID选择符 100分
- 一个行内样式 1000分
例如
- 为<img>标签定义一个标签样式（特指度：1）
- 一个名为.banner的类样式（特指度：10）
- 一个名为#logo的ID样式（特指度：100）
- ::first-line（特指度：1）
- :link （特指度：10）
假如网页中有这行HTML代码：
<img id="logo" class="banner" src="banner.png" />
如果在三个样式中都定义了相同的属性，例如border属性，那么，ID样式（#logo）里的值会胜出。
后代选择符由多个选择符组成（例如#content p），计算方式会复杂一些。
特指度计算方法.png
需要注意：在特指度相同的时候，后一个样式胜出（就近原则）
!important
最后，还有一个开挂的存在：!important
!important 是CSS提供的一种完全忽略特指度的方式。如果十分确定，不想让更具体的样式覆盖某个属性，就可以使用这个技巧。
只需在属性后面加上!important，就能避免属性被特指度高的样式覆盖
CSS代码
#nav a { color: pink; }
a { color: red !important; }
!important的作用对象是单个属性，而不是整个样式。
如果两个样式中的同名属性后都有!important，更具体的那个样式里的属性胜出。
在日常开发中，我大部分都避免用ID选择符来控制样式，因为ID选择符的特指度太高了，不容易被覆盖。而修改特指度往往会导致特指度战争，可能会导致样式表中经常出现特别长特别复杂的选择符（即：不断叠加后代选择符）。
希望以上笔记对大家有帮助。
我的其他笔记在微信公众号：Rabbit_svip
欢迎前来点评~
微信订阅号：rabbit
