CSS元素属性继承（Cascade）

最新推荐文章于 2024-09-24 10:23:52 发布

hongse_zxl

最新推荐文章于 2024-09-24 10:23:52 发布

阅读量1.6k

点赞数 1

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/hongse_zxl/article/details/40624181

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

声明1：本篇内容大量参照W3C：http://www.w3.org/TR/CSS2/cascade.html

声明2：英语里继承的单词应该是Inheritance，而Cascade意思是瀑布。文章标题【继承（Cascade）】并非不懂英语，而是本人理解之后认为Cascade等级是实现CSS元素属性继承的基础。

元素属性继承规则：

浏览器先判等级，等级高的优先。同等级的CSS再评分，分数高的优先。同等级同分的CSS再依据加载顺序（通常就是CSS里定义的顺序），后加载的优先。

规则详解1，何为等级？

CSS分为3个等级，分别为作者式样（Author），用户式样（User），浏览器默认式样（Browser Default）

1.作者式样（Author）其实就是程序员写的CSS式样

2.用户式样（User）是用户自定义式样。这里需要说明一下，很多程序员可能不知道用户还能自定义CSS式样，其实是可以的。用户可以用浏览器插件如stylish来写自己想要的CSS。虽然几乎没人这么做，但这样做是允许的。多用于残疾人，如色盲色弱可以将标题颜色color定义成自己喜爱的颜色。这样加载页面后，标题将显示用户指定的颜色，而非程序员写的CSS中的颜色。

3.浏览器默认式样（Browser Default）就是在没有为html元素定义任何式样时，浏览器会有一套该元素默认的式样。

三个等级的优先级是：作者式样 > 用户式样 >浏览器默认式样

规则详解2，何为评分？

一般情况下用户不会自定义CSS式样。因此通常浏览器判出来的等级都是作者式样，即程序员指定的CSS式样。（浏览器默认式样可忽略）

在程序员指定的CSS式样里，将根据选择器来评分，规则如下：

初始值为000，百分位是id，十分位是类或伪类，个位是元素名

举例：（下面是各种CSS选择器情况，.点后面跟的是类名，#井号后面跟的是id）

h1.greentea 011

ol li p 003

em 001

p img 002

.green 010

span.cd 011

a:link 011

#divid h1 101

#h1header 100

如果该CSS里定义了上面这堆选择器，根据评分，得分最高的是【# divid h1】分数为101（一百零一分），得分最低的是【em】分数为001（一分）

如果html里如下定义：

<div id="divid">
	<h1 id="h1header">xxxxxxx</h2>
	。。。。
</div>

该h1将引用# divid h1指定的式样，而非引用#h1header指定的式样，因为前者评分高于后者101>100

规则详解3，何为加载顺序？

同一CSS里写在后面的式样后被加载。因此同等级（同一CSS当然是同等级），同评分状态下，写在后面的式样将被引用。

有无特例？

如你所想，任何规则都有后门。这里的后门就是为属性后面加上!important，这样就好比其他语言中的goto语句，将使该属性的优先级一下提升为最高：


#<span style="color:black;">divid</span><span style="color:black;"> h1</span> {
    font-size: 120%;  //根据评分规则，这个分数高，本因引用这个式样
}

#h1header {
    font-size: 150% !important;   //加上!important后相当于开了后门，将跳过一切规则，直接引用该式样
}

需要说明的是，如果同一等级的两处都指定了!important，那等于都没开后门，两处仍旧是得分高的优先。

如果不同等级的两处，如作者和用户都指定了!important，那用户指定的优先。