优先级"/>
讲给后台程序员看的前端系列教程(19)——CSS的层叠性与继承性以及优先级
C语言自学完备手册(33篇)
Android多分辨率适配框架
HTML5前端开发实战系列教程
MySQL数据库实操教程(35篇图文版)
推翻自己和过往——自定义View系列教程(10篇)
走出思维困境，踏上精进之路——Android开发进阶精华录
讲给Android程序员看的前端系列教程(40集免费视频教程+源码)
版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：
经过这段时间的学习，我们对CSS有了初步的了解和入门。在此基础之上，我们来了解CSS的特性。
CSS的层叠性
所谓层叠性是指CSS样式的叠加。例如，当使用内嵌式CSS样式表定义p标签的字号大小为18px，并使用行内式定义p标签的颜色为绿色；那么，p标签中的文本最终显示为18px绿色。
示例如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS层叠性</title><style type="text/css">p {font-size: 18px;font-family: "微软雅黑";}.poem {font-style: italic;}#secondLine {color: green;font-weight: bold;}</style></head><body><p>朱雀桥边野草花，乌衣巷口夕阳斜。</p><p class="poem" id="secondLine">旧时王谢堂前燕，飞入寻常百姓家。</p></body>
</html>
效果如下：
CSS的继承性
CSS的继承性是指：子标签会继承父标签的某些样式，比如，文本颜色和文字大小。例如：假若定义body文本颜色为黑色，那么页面中所有文本都将显示为黑色。这是因为其它标签均嵌套在body标签中，它们均是body的子标签。
CSS的优先级
CSS为每一种基础选择器都分配了相应的权重。其中，标签选择器的权重为1，类选择器的权重为10，id选择器的权重为100。复合选择器(除并集选择器以外)的权重为基础选择器权重的叠加。当发生样式冲突时，则显示权重值最大的样式。
注意事项：
- 行内样式优先。即行内样式的权重非常高，具有很高的优先级
- 权重相同时，CSS样式遵循就近原则
- ! important 具有最高优先级；无论其权重和样式位置! important都具有最大优先级
更多推荐
讲给后台程序员看的前端系列教程(19)——CSS的层叠性与继承性以及优先级
发布评论