css中哪些属性可以继承?

这是前两天突然想到的一个问题,经常看见有的css样式中会出现XXX:inherit;自己模仿的时候也就跟着写了,但却不知道它的原理是什么。当然,留心的话多写几次也能总结出来,比如经常看见文本相关的会写inherit,表格类会写inherit,但不总结的话,知识就不会形成经证实的认知,不会完全吸收为自己的东西,所以还是查找了资料记录下来。 css中默认会继承的属性在上面已经提到了,一是文本相关的属性,具体有: font-family, font-size, font-style,font-variant, font-weight, font, letter-spacing,line-height,text-align, text-indent, text-transform,word-spacing 二是列表相关的属性,具体如下: list-style-image, list-style-position,list-style-type, list-style 还有一个属性比较重要的是color属性。
查找资料过程中发现另外一个小知识点,虽然之前也看到过,但那时候没有完全理解,也没有记录,以至于再次看到时竟感觉完全没接触过,这次理解了也记录下来。那就是css中样式的特性值,它代表了不同样式的权重,权重大的样式优先。比如一个元素同时具有几个类或id,并且样式之间具有冲突,则权重大的样式会覆盖权重小的样式。
<div class="classname" id="idname"></div> <style> .classname{ color:red; } #idname{ color:blue; } </style> 则这个div的文本颜色为为蓝色。因为id的权重比class大。那么权重的具体计算规则是怎样的呢?如下所示:
         h1 {color:blue;}                        特性值为:1
  p em{color:purple;}                    特性值为:1+1=2
  .apple {red;}                           特性值为:10
  p.bright {color:yellow;}                  特性值为:10+1=11
  p.bright em.dark {color:brown;}           特性值为:10+1+10+1=22
  #idname {color:yellow}                   特性值为:100

这是正常情况下的计算规则,那么有没有特例呢?我们需要更周密的思考,你想到了什么么?是的,内联样式呢?像这样: <div class="classname" id="idname" style="color:green"></div> 这时候谁的优先级更高呢?答案是内联样式的更高。 还有一种特殊情况,是的,!important.如果样式注明了important优先级呢?那么,不管是内联样式还是外链样式,!important的优先级都是最高的。 空口无凭的啊,是啊,必须拿出demo才行。这也是我现在给自己的要求,不能轻易的相信被人告诉我的经验,未经过自己证实的经验都不是自己的认知。

转载http://www.cnblogs.com/HUSTecho/archive/2013/03/26/3199538.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值