Blog

深入 css 选择器及权重

time: 2018.11.16

以往只知道 css 选择器权重的基本规则，每当需要覆盖的时候都是设置的 !important ，感觉不能一直这么写，在加入伪元素和后代选择器的时候，就不知道谁的优先级最高了。所以有必要深入学习一下 css 选择器的权重知识

目录：
1 选择器类型
2 权重分配
  2.1 权重分配规则
  2.2 权重比较规则
  2.3 实例
3 伪类和伪元素

1 选择器类型

常用

  1. id 选择器： #myid
  2. 类选择器： .myclass
  3. 标签选择器： p
  4. 后代选择器： li a
  5. 子选择器： li > a
  6. 通配符选择器： *
  7. 伪类选择器： a:hover
  8. 伪元素选择器： a::before

不常用

  1. 相邻选择器： h1 + p
  2. 兄弟选择器： h1 ~ p
  3. 属性选择器：a[rel = “external”]

css3 新增伪类选择器

  1. p:first-of-type 其父元素下面的第一个p元素
  2. p:last-of-type 其父元素下面的最后一个p元素
  3. p:only-of-type 其父元素只有一个p类型的子元素的每个p元素
  4. p:only-child 其父元素只有一个子元素的每个p元素
  5. p:nth-child(2) 其父元素的第二子元素的每个p元素

2 权重分配

基本规则：行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式， ID > class > 元素

2.1 权重分配规则

十进制

  1. 第一等：代表内联样式，如: style=””，权值为1000。
  2. 第二等：代表ID选择器，如：#content，权值为0100。
  3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
  4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
  5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
  6. 继承的样式没有权值。

!important 优先级最高

2.2 权重比较规则

  1. 1,0,0,0 > 0,99,99,99 从左往右，等级逐渐降低
  2. 在权重相同的情况下，后面的样式会覆盖掉前面的样式。
  3. 通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先。

2.3 实例

a{color: yellow;} /*元素：0,0,0,1*/
div a{color: green;} /*元素：0,0,0,2*/
.demo a{color: black;} /*类 + 元素：0,0,1,1*/
.demo input[type="text"]{color: blue;} /*类 + 元素+ 属性：0,0,2,1*/
.demo *[type="text"]{color: grey;} /*类 + 通配 + 属性：0,0,2,0*/
#demo a{color: orange;} /*id + 元素：0,1,0,1*/
div#demo a{color: red;} /*元素 + id + 元素：0,1,0,2*/

3 伪类和伪元素

伪类： :hover , :first-of-type
伪元素： ::before/:before, ::after/:after

2者如何区分呢？

  1. 伪类表示操作文档中已有的元素，而伪元素则创建一个元素
  2. css3 规定使用 :: 来表示伪元素

3.1 伪类选择器

匹配处于特定状态的一个或多个元素。元素可能有的状态：初始化、鼠标悬浮、聚焦、禁用、选中、访问过等等，但是不是所有元素都有这些状态

最近遇到一个问题，要在邮件中实现 tab 切换，但是邮件中不能使用 javascript ，那么就考虑到了只用 css 来实现，就需要考虑到元素的状态有哪些已经支持了，这里来总结一下

  1. 鼠标经过：:hover
  2. 鼠标点击：:checked ，仅限于 radio, checkbox, select