Weights and Selector in CSS

常用十大选择器:

  1. ID
  2. class
  3. tag
  4. 属性
  5. 相邻+
  6. 兄长~
  7. 亲子>
  8. 后代div div
  9. 通配 *
  10. 伪类
  11. 伪元素

So marked as API:

伪类列表

  1. :link
  2. :visited
  3. :active 按键和松开时间
  4. :hover 悬浮
  5. :focus 表单输入时
  6. :first-child
  7. :nth-child(n) 第n个
  8. :nth-last-child
  9. :nth-of-type
  10. :first-of-type 第一个出现的类型
  11. :last-of-type
  12. :empty 没有子元素
  13. :target 页面url#ID时激活
  14. :checked checkbox,option
  15. :enabled 所有可激活元素,点击,选择,文本输入
  16. :disabled input displayed

其中链接伪类先后顺序被称为LVHA顺序: :link:visited:hover:active

基于关系的选择器:

  1. a b 所有内部元素
  2. >直属父子元素
  3. +之后的紧接元素
  4. ~之后的所有之后的元素

权重:

注意,值只是该单位的值,并不是10进制的数,理论上来说应该是0,0,0,0,0这样不可进位

  1. !important;
  2. 行内
  3. ID: 100
  4. class, 伪类,属性:10
  5. 标签,伪类元素(before, after):1

通配选择符(universal selector)(*), 关系选择符(combinators) (+, >, ~, ‘‘) 和 否定伪类(negation pseudo-class)(:not()) 对优先级没有影响,其优先级将拆分成两个来进行运算。(但是,在 :not() 内部声明的选择器是会影响优先级)

理论上是按权重计算(除去内存存储问题),如图:

CSS权重趣味漫画

基本规则:

  1. !important优先级最高,同是important按引入顺序或权重再计算。
    所以!important也可以通过这种方式来覆盖

  2. 行内样式覆盖所有非!important

  3. 单种选择器,超过权重不会跨等级使其生效。如11个class不会超过一个ID,
    256个可以😊。
    主要原因是浏览器选择器的字节存储长度。

  4. 多种则选择器时,上层权重相同,同层计算比较权重和顺序。权重比较:2,1 > 1, 12,如下图。

    权重比较:2,1 > 1, 12

  5. 注意属性和class是权重一样的,这个对于使用Vue人来说比较常见。Vue中的样式scope属性可以为组件元素和其中对应的样式添加一个随机data标签,组件内的样式只会对该组件的元素生效。这是为了防止内部样式命名问题等污染其他组件样式,但是这只限制了其样式不会向外泄露,即使在约定不使用!important的情况下,也并不能保护外部样式不会重写内部元素。当通过增加class或者ID使权重大于内部样式即可覆盖最好是按照规范使用v-deep

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .parent-class {
    &::v-deep .child-class {
    background-color: #000;
    }
    }
    .parent-class {
    & /deep/ .child-class {
    background-color: #000;
    }
    }

    .parent-class >>> .child-class { /* ... */ }

BEM规范

Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development.

通过b__e--m的格式优化选择器写法,缺点是写法太长太丑。

1
2
3
4
5
.human {
&__finger {
&--little {}
}
}

正常的写法会是b__e—m,但当出现内部嵌套时,内部还是会有b--m b__e这种出现,看团队选择是否使用。

还可以通过mixin方式实现函数编程,但感觉实际可用性,可读性一般,链接参考

That’s it.

参考资料: