第四讲：css的继承性和层叠性

css继承性

继承性就是当给自己设置属性的时候，自己的后代都继承上了。

哪些属性能继承？关于文字样式的，都能够继承，如：color、 text-开头的、line-开头的、font-开头的。所有关于盒子的、定位的、布局的属性都不能继承。

【案例】

CSS

div{

color:green;

text-align: center;

line-height: 35px;

font-size: 14px;

}

HTML

标题

段落

li

li

分析：当给div设置样式时，h1标签、p标签、li标签都继承了div的样式。

【浏览器显示效果】

css层叠性-权重计算

css层叠性就是css处理冲突的能力，也就是css权重问题。

【权重计算方法一】

先看有没有选中，如果选中了，那么以id数，类数，标签数来计权重。谁大听谁的。如：

CSS

#box1 div{/*1个id，1个标签*/

color: red;

}

#box3{/*1个id*/

color: blue;

}

HTML

文字

分析：#box1div{…}和#box3{…}都选中了最内层div，#box1div{…}包含了1个id，1个标签；#box3{…}包含了1个id；因此#box1 div{…}的权重比#box3{…}的要大，以#box1 div{…}的样式为准。

【浏览器显示效果】

文字

【权重计算方法二】

先看有没有选中，如果选中了，那么以id数，类数，标签数来计权重。如果都一样，以后写的为准。如：

CSS

#box2 div .paragraph{/*1个id，1个标签，1个类*/

color: blue;

}

#box1 .box2 p{/*1个id，1个标签，1个类*/

color: red;

}

HTML

段落

分析：#box2 div .paragraph{...}和#box1 .box2 p{...}都选中了段落p。都包含1个id，1个类，1个标签，因此权重一样。权重一样，以后写的为准。

【浏览器显示效果】

段落

【权重计算方法三】

如果没有选中，那么权重是0。如果大家都是0，就近原则。如果描述的一样近，比选择器权重，如果权重再一样，以后写的为准。如：

CSS

#box3{

color: blue;

}

#box1 #box2{

color: red;

}

HTML

段落

分析：#box3{…}没有选中段落p，权重为0；#box1 #box2{…}没有选中段落p，权重为0。#box3{…}描述到了倒数第二层，#box1 #box2{…}描述到了倒数第三层。因此#box3{…}离的近，权重大。

【浏览器显示效果】

段落

打赏规则

为了避免对于打赏模式产生误解，说明一下几点内容：

1.打赏纯粹自愿，金额不限；

2.打赏不能作为解答前端技术疑问的理由；

3.打赏不能作为催促更新文章的理由；

4.打赏不能帮你做毕业设计或论文；

5.打赏不能帮你做工作中的项目；

6.总之：打赏就是这不能那不能，只是单纯打赏而已。

声明

* 公众号（QD前端基地）内转载文章全部用于学习交流，如有涉及版权问题请与我联系，我会删除相关文章。给您带来不便敬请谅解，谢谢！

* 公众号（QD前端基地）内原创文章如内容不符合事实或涉及其他方面的问题，请及时通知本人进行修改或删除。版权作品未经授权严禁盗图转载，如有雷同纯属巧合。

* 转载公众号（QD前端基地）内的文章，请先与本文作者联系经过同意后方可转载，并注明相关出处和作者信息且留下原文链接地址，这是对文章作者的尊重，也是对知识的尊重。欢迎同行网站转载本站文章。

【投诉请联系微信】：xinxiha888

前端基地

「前端基地」最专业的Web前端开发在线学习公众号，提供Web前端开发教程，是分享Web前端开发技术和前端资源的在线学习交流公众号。

关注一下，也许你就成为牛逼的前端高手呢～

微信公众号：qdbase