CSS的层叠与继承

淩亂°似流年 2022-05-11 15:54 359阅读 0赞

层叠

什么选择器在层叠中胜出取决于三个因素。

  • 重要性
  • 专用性
  • 源代码次序

重要性

CSS中的!important语句可以使让一条规则总是优于其他规则，即为不可被覆盖。例如

  1. a{
  2.     border: none !important
  3. }

专用性

专用性基本上是衡量选择器的具体程度的一种方法——它能匹配多少元素。所以元素选择器具有最低的专用性，而id选择器则最高。

注：通用选择器 (*), 复合选择器 (+, >, ~, ’ ‘) 和否定伪类 (:not) 在专用性中无影响。

源代码次序

如果多个选择器具有相同的重要性和专用性，那么将按照源代码次序，即后面的选择器战胜前面的选择器。

继承

CSS为处理继承提供了四种特殊的通用属性值：

  • inherit： 该值将应用到选定元素的属性值设置为与其父元素一样。
  • initial ：该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值，并且该属性是自然继承的，那么该属性值就被设置为 inherit。
  • unset ：该值将属性重置为其自然值，即如果属性是自然继承的，那么它就表现得像 inherit，否则就是表现得像 initial。
  • revert ：如果当前的节点没有应用任何样式，则将该属性恢复到它所拥有的值。换句话说，属性值被设置成自定义样式所定义的属性（如果被设置）， 否则属性值被设置成用户代理的默认样式。

注：CSS速写属性 all 能够被应用到每一个继承属性，一次性应用所有的继承属性。这里的值可以是继承属性里的任何一个 (inherit, initial, unset, or revert)。

发表评论

表情：
评论列表 （有 0 条评论，359人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS学习摘要-层叠和继承

    当有多个选择器作用在一个元素上时，哪个规则最终会应用到元素上？ 其实这是通过层叠机制来控制的，这也和样式继承(元素从其父元素那里获得属性值)有关。 元素的最终样式可以在多个

    向右看齐向右看齐/ 0 赞/ 363 阅读

    相关 CSS-继承和层叠

    一: 继承 面向对象语言都会存在继承的概念，在面向对象语言中，继承的特点：继承了父类的属性和方法。那么我们现在主要研究css，css就是在设置属性的。不会牵扯到方法的层面

    悠悠悠悠/ 0 赞/ 477 阅读