层叠、继承、css权重优先级的计算

最新推荐文章于 2023-10-12 21:15:00 发布

.慢慢亦漫漫

最新推荐文章于 2023-10-12 21:15:00 发布

阅读量334

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_43183219/article/details/122178736

版权

本文详细介绍了CSS中的层叠规则，包括顺序规则、优先级和重要程度（!important）。解释了如何计算选择器的优先级，并通过实例展示了继承的理解与控制，以及不同通用属性值的效果。通过对优先级的深入理解，读者能够更好地掌握CSS样式的应用。

摘要由CSDN通过智能技术生成

1.层叠

1.1顺序规则

css的顺序规则很重要，同级别的两个规则都应用到一个元素身上时，最后出现的规则会被使用，举个例子：
代码展示：

<style>
    p{
     
        color: blueviolet;
    }
    p{
     
        color: chartreuse;
    }
</style>
<body>
    <p>
        凤毛麟角
    </p>
</body>

显示效果：
顺序规层叠效果
从以上示例我们可以看出来，后面设置的绿色覆盖了之前设置的紫色，这就是顺序规则。

1.2优先级

优先级：在写程序过程中我们会发现有的规则它明明在前面但是元素应用的还是它的规则，并没有使用最后一个出现的规则，这就是它的优先级比后面的优先级高。
常见的选择器优先级高低如下：
行内样式（没有选择器）>ID选择器>类选择器属性选择器伪类选择器>元素选择器伪元素选择器

举一个简单的例子：
代码：

<style>
    .p1{
     
        color: blueviolet;
    }
    p{
     
        color: chartreuse;
    }
</style>
<body>
    <p class="p1">
        凤毛麟角
    </p>
</body>

显示效果：
优先级层叠效果展示
从上述示例中可以看出我们的类选择器在前面，元素选择器在后面，但是我们类选择器的紫色覆盖了元素选择器的绿色，这是因为类选择器比元素选择器优先级高。这只是一个简单的优先级，文章后面会介绍复杂的优先级的计算方法。

1.3重要程度

“！important”：这是css中比较的存在，他可以覆盖掉所有的优先级计算以及普通规则，举一个简单的例子：
代码展示：

<style>
    .p1{
     
        color: blueviolet ; 
    }
    #p2{
     
        color: red;
    }
    p{
     
        color: chartreuse;
    }
</style>
<body>
    <p class="p1" id="p2" >
        凤毛麟角
    </p>
</body>

效果展示：

我们看一下上述示例，优先级最高的是我们的ID选择器，所以我们的字体颜色就是红色，那么现在我们给程序优先级最低的元素选择器加上“！important”，并且给p元素写一个优先级最高的行内样式，我们看看效果。
代码：

<style>
    .p1{
     
        color: blueviolet ; 
    }
    #p2{

最低0.47元/天解锁文章