CSS学习笔记:层叠和继承

来源:互联网 发布:webpack搭建php服务器 编辑:程序博客网 时间:2024/05/14 07:43

特殊性

对于每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明上。如果元素有两个或多个冲突的属性声明,那么有最高特殊性的声明就会胜出。

  • ID选择器:0 1 0 0
  • 类选择器、属性选择器、伪类选择器:0 0 1 0
  • 元素选择器、伪元素选择器: 0 0 0 1
  • 结合符和通配符对特殊性没有任何贡献

要注意几点:

  • ID选择器和指定id属性的属性选择器在特殊性上不同
  • 内联样式比其他声明的特殊性都高,也就是 1 0 0 0

重要性

有时某个声明可能非常重要,超过了其它所有声明,那么就允许在这些声明的结束分号之前插入 !important 来标志。
注意:

  • 每一条声明都需要它自己的!important标志。
  • !important总是放在声明的最后,分号的前面;在其他位置都不会生效。

标志为!important 的声明并没有特殊的特殊性值,并且与未标注的声明分开考虑。所有!important 声明会分组在一起,它们的特殊性冲突会在其内部解决,而不会与非重要声明相混。
类似的,我们认为所有非重要声明也归为一组,使用特殊型来解决冲突。
如果一个重要声明和一个非重要声明冲突,胜出的总是重要声明。

继承

基于继承机制,样式不仅应用到指定的元素,还会应用到他的后代元素。

  • 不是所有属性都能继承。
  • 继承的值没有特殊性,比0特殊性还要弱

层叠

CSS的层叠规则如下:

  1. 找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器。
  2. 按权重和来源对所有应用到该元素的声明排序:
    • 标志!important的规则的权重要高于没标注的;(也高于内联样式)
    • 开发者样式、用户样式……
  3. 按特殊性对应用到元素的所有声明排序
  4. 按出现顺序对应用到元素的所有声明排序
    • 一个声明在样式表中越后面的位置出现,它的权重就越大。
      即如果两个规则的权重、来源和特殊性都完全相同,那么在样式表中后出现的会胜出。

注意:一般认为元素style属性中指定的样式(即内联样式)位于文档样式表的最后。

正是由于这种按顺序排序,所以才有了通常推荐的链接样式顺序:link-visited-hover-active,其实link和visited的顺序不重要。

0 0