CSS的层叠与继承

层叠

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

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

重要性

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

a{
    border: none !important
}

专用性

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

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

源代码次序

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

继承

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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值