我要分享技术
0%

CSS选择器与优先级

发表于 更新于 分类于 ，

CSS选择器与优先级

选择器种类

  1. 元素选择器。 元素选择器以元素标签为选择子。对与html中标签类型形同的元素进行匹配。 因为一个html页面中，相同类型的元素出现不少，所以这类选择器匹配范围广泛，按照越少，越精准优先级越高的原则，元素选择器的优先级是很低的。
  2. 伪元素选择器。 伪元素选择器使用::作为前导，其一个明显特点是， 更改其选择对象不为前导的匹配对象，而是按照选择器规则去选取其他的对象。
  3. 类选择器。 类选择器以点号.为前导，后加类名。在html中，一簇类似功能的元素会指定class="classname ..."属性来为类选择器提供选择依据。在页面中，此类元素数量往往远少于元素数量，所以其优先级也更高。
  4. 伪类选择器。伪类选择器以冒号:作为前导，其后紧跟元素的某一状态。其选择特征为，在前导选择器选中的元素的基础上，添加某一个状态作为条件。
  5. ID选择器。以#作为前导，后紧跟ID名。按照规范，在一个html页面中，ID应当是唯一的，所以ID选择器要么补选中元素，要么选中一个。所以它的优先级是最高的。

选择器的优先级

在CSS属性附加到DOM树的过程中，往往会出现这样一种情况。多个选择器同时匹配到同一个DOM元素，而他们的属性配置值不同。 这个时候，就需要使用冲突解决方案了。

属性解决采用两类元素决定：

  1. 优先级。
  2. 先后顺序。

多个选择器匹配时，选择优先级高的优先级属性使用，当优先级相同时，选择后出现的属性。

浏览器如何计算优先级的

浏览器将优先级分为四个级别，采用级别记分，其中每个级别上符合条件的匹配将会使优先级得分累加，最终，采用优先级得分最高的样式。

  1. 第一级别：内联。在html元素中配置style属性时，为内联属性，而且它不属于选择器，且只能配置一次，所以优先级最高。 ** 需要注意的是，使用内联属性不是一个好习惯，除非不得已我们尽量使用外部CSS来确定样式 **
  2. 第二级别： ID选择器。 CSS中，使用井号前导一个元素的ID选择器。它能够精准的选定某一个元素，所以优先级很高，在这里它是次高的优先级。
  3. 第三级别：类/伪类选择器。
  4. 第四级别：元素/伪元素选择器。

其中，CSS样式表选择器每匹配到一个规则，就在规则计分项上记一分，最终，从第一优先级向第四优先级方向对比，当第一个积分不等的优先级出现后即停止，选中计分高的选择器。

特殊的优先级 !important

!important 拥有至高的优先级， 它用于描述某一条属性，而非一个选择器。它的工作方式打破了选择器优先级的常规，一旦某个属性被声明为 !important，则无视比它所在选择器更高优先级的选择器，对于该项属性进行强制覆盖。

按照规范，这个特性是应该谨慎使用的，一般的，除非没有其他办法可以打到这个效果，所有情况下都不推荐使用。

列表选择器

有一种特殊的选择器写法， 它使用逗号,分隔选择表达式， 例如：

1
2
3
h, div {
    background-color: red;
}

这类选择器与分开写法是等效的，等效于:

1
2
3
4
5
6
7
h {
    background-color: red;
}

div {
    background-color: red;
}

但是，一旦其中一个选择器出错，分开写的那个选择器会被丢弃不处理，而列表选择器则整个失效。

CSS位置对效果的影响

考虑到一些特殊用户的偏好（例如视力弱者希望字体更大），需要满足以用户指定的样式来覆盖开发者指定的样式。

CSS的位置基本可以分为：

  1. 代理内置的默认样式，即浏览器默认样式。若开发者和用户均未指定样式时，则采用这个默认样式渲染。
  2. 用户样式，一般在浏览器设置中，允许用户更改某些浏览器内置的样式。 这个样式，就是用户样式。
  3. 开发者常规样式。 即一般开发人员使用CSS声明的样式。
  4. 开发者 !important样式。 开发者使用!important声明的样式。
  5. 用户!important样式。类似开发者!important样式。

以上积累样式，如果出现冲突，那么序号大者将会覆盖序号小者的设置。