阅读 350

css - 选择器优先级

特殊性

从CSS选择器文章中我们知道,与多种不同的方法选择元素。所以当我们使用多种规则的时候,我们必须要明确其中的优先级。但是在CSS选择器的规则中,称之为特殊性,特殊性越高,自然优先级越高。

此时我们会先得到一个特殊性说明:

  • !important 特殊性最高,详情访问重要性
  • 对于内联样式,加1000
  • 对于选中器中给定的ID属性值,加0100
  • 对于选择器中给定的类属性值,属性选择或伪类,加0010
  • 对于选择器中给定的元素选择器和伪元素,加0001.
  • 结合符和通配符选择器对特殊性没有任何贡献,0000

image.png


排除伪元素其他选择器优先级

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      #ID-selector {
        font-size: 10px;
      }

      .class-selector {
        font-size: 12px;
      }

      *[proprty-selector] {
        font-size: 14px;
      }

      *:first-child {
        font-size: 16px;
      }

      div {
        font-size: 18px;
      }

      * div {
        font-size: 20px;
      }

      * {
        font-size: 24px;
      }
    </style>

  </head>

  <body>
    <div style="font-size: 6px;" proprty-selector="true" id="ID-selector" class="class-selector">
      test css selector priority
    </div>

  </body>
</html>
复制代码


这里的选择器筛选出两个组查看:

类,属性,伪类

      .class-selector {
        font-size: 12px;
      }

      *[proprty-selector] {
        font-size: 14px;
      }

      *:first-child {
        font-size: 16px;
      }
复制代码


元素,关系

      div {
        font-size: 18px;
      }

      * div {
        font-size: 20px;
      }
复制代码


查看页面渲染css应用结果

image.png

从上图中可以看到:
属性书写顺序:类,属性,伪类
css 应用顺序:伪类,属性,类

属性书写顺序: 元素,关系
css 应用顺序: 关系,元素


结论

明确两点:

  • 当选择器出于同一种特殊性的时候,位于css文件下部的样式会覆盖上面的样式。
  • 通配符选择器对于特殊性没有任何贡献,所以尚敏面我用了通配符(强烈说明日常开发最好不要使用过多通配符,这里只是为了举例子)来代替div属性,是因为要将div自身的特殊性影响排除。

css选择器优先级

ID > 类 = 属性 = 伪类 > 元素 = 关系 > 通配符


伪元素的不同

伪元素优先级很高?

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      #ID-selector {
        font-size: 10px;
      }

      .class-selector {
        font-size: 12px;
      }

      div {
        font-size: 18px;
      }

      *::first-letter {
        font-size: 22px;
      }

      * {
        font-size: 24px;
      }
    </style>

  </head>

  <body>
    <div style="font-size: 6px;" proprty-selector="true" id="ID-selector" class="class-selector">
      test css selector priority
    </div>

  </body>
</html>
复制代码

image.png
可以看到上面的红色框最后有一个伪元素的样式应用起来。看起来好像伪元素的优先级很高啊,比内联样式的优先级还高。


伪元素优先级和元素,关系是同一级别

这个需要使用ie浏览器测试:

#ID-selector {
	font-size: 10px;
}

.class-selector {
	font-size: 12px;
}

*[proprty-selector] {
	font-size: 14px;
}

*:first-child {
	font-size: 16px;
}

div {
	font-size: 18px;
}

* div {
	font-size: 20px;
}

*::first-line {
	font-size: 22px;
}

* {
	font-size: 24px;
}

复制代码

image.png

根据上面的说明:伪元素优先级和元素,关系优先级相同。


结论:

ID > 类 = 属性 = 伪类 > 元素 = 关系 = 伪元素 > 通配符


伪元素的特殊之处

为什么会有上面的情况?

www.w3.org/TR/selector… document languages do not offer mechanisms to access the first letter or first line of an element’s content, but there exist pseudo-elements (::first-letter and ::first-line) that allow those things to be styled.


我英语不是很好,理解一下:
文档语法没有提供可以直接访问伪元素first letter或者first line的机制。但是确实存在伪元素去应用样式。

伪元素起作用的不是css规则当中的选择器:而是根据规则创建出来的伪元素自身

image.png


这里可能将伪元素的优先级和其他的放在一起进行比较不太合适,毕竟大家作用的元素不同,其他作用的都是文档中的元素,伪元素作用的是不存在文档的伪元素

文章分类
前端
文章标签