css - 选择器优先级从CSS选择器文章中我们知道，与多种不同的方法选择元素。所以当我们使用多种规则的时候，我们必须要

特殊性

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

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

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

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

<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应用结果

从上图中可以看到：
属性书写顺序：类，属性，伪类
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>

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

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

这个需要使用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;
}

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

结论：

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规则当中的选择器：而是根据规则创建出来的伪元素自身

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