CSS - 层叠特性

最新推荐文章于 2021-05-10 13:42:46 发布

weixin_34245169

最新推荐文章于 2021-05-10 13:42:46 发布

阅读量89

点赞数

原文链接：http://www.cnblogs.com/johnvwan/p/9574670.html

版权

本文和大家聊聊CSS的层叠属性。CSS的全名叫做“层叠样式表”，这里的“层叠”是什么意思呢？为什么这个词如此重要，以至于要出现在它的名称里。

一. 层叠特性

CSS的层叠特性确实很重要，但是不能和“继承”相混淆，二者有着本质的区别。层叠可以简单地理解为“冲突”的解决方案。例如有以下代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>层叠特性</title>
<style>
    p{
        color: green;
    }
    .red{
        color: red;
    }
    .purple{
        color: purple;
    }
    #line3{
        color: blue;
    }
</style>
</head>
<body>
    <p>这是第1行文本</p>
    <p class="red">这是第2行文本</p>
    <p id="line3" class="red">这是第3行文本</p>
    <p style="color: orange;" id="line3">这是第4行文本</p>
    <p class="purple red">这是第5行文本</p>    
</body>
</html>

代码中一共有5组p标记定义的文本，并在head部分声明了4个选择器，声明为不同颜色。下面的任务是确定每一行文本的颜色。

第1行文本没有使用类别样式和ID样式，因此这行文本显示为标记选择器p中定义的绿色。
第2行文本使用了类别样式，因此这时已经产生了“冲突”。那么，是按照标记选择器p中定义的绿色显示，还是按照类别选择器中定义的红色显示呢？由于类别选择器的优先级高于标记选择器，因此显示为类别选择器中定义的红色。
第3行文本同时使用了类别样式和ID样式，这又产生了“冲突”。那么，是按照类别选择器中定义的红色显示，还是按照ID选择器中定义的蓝色显示呢？由于ID选择器的优先级高于类别选择器，因此显示为ID选择器中定义的蓝色。
第4行文本同时使用了行内样式和ID样式，那么这时又以哪一个为准呢？由于行内样式的优先级高于ID样式的优先级，因此显示为行内样式定义的橙色。
第5行文本中，使用了两个类别样式，应以哪个为准呢？由于两个类别选择器的优先级相同，此时以前者为准，显示为“.purple”中定义的紫色。

综上所述，优先级的规则可以表述为：行内样式>ID样式>类别样式>标记样式。代码最终显示结果如下图所示。

二. 应用

在复杂的页面中，某一个元素有可能会从很多地方获得样式，例如一个网站的某一级标题整体设置为使用绿色，而对某个特殊栏目需要使用蓝色，这样在该栏目中就需要覆盖通用的样式设置。在很简单的页面中，这样的特殊需求实现起来不会很难，但是如果网站的结构很复杂，就完全有可能使代码变得非常混乱，可能出现无法找到某一个元素的样式来自于哪条规则的情况。因此，必须要充分理解CSS中的“层叠”原理。

好了，本篇文章就介绍到这儿，欢迎大家留言交流；喜欢或有帮助到您的话，点个赞或推荐支持一下！

转载于:https://www.cnblogs.com/johnvwan/p/9574670.html