## CSS样式声明冲突解决方法

最新推荐文章于 2024-12-07 14:17:18 发布

7束QW

最新推荐文章于 2024-12-07 14:17:18 发布

阅读量499

点赞数 1

分类专栏： css样式冲突文章标签： css

本文链接：https://blog.youkuaiyun.com/V8min/article/details/109698211

版权

css样式冲突专栏收录该内容

1 篇文章

订阅专栏

本文介绍了CSS样式声明冲突的解决方法，包括比较重要性、特殊性和源次序。作者强调了`!important`的最高优先级，接着是作者样式表、浏览器默认样式。特殊性的计算涉及内联样式、ID、类、标签选择器的权重。最后，遵循就近原则，后定义的样式规则优先应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS样式声明冲突解决方法

查找一些教材中（w3schools等），只说css的顺序是“元素上的style” > “文件头上的style元素” >“外部样式文件”，但对于样式文件中的多个相同样式的优先级怎样排列，没有详细说明。

在css中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于一般选择器的规则。如果两个规则的特殊性相同，那么后定义的规则优先。

经过测试和继续搜索，得知优先级如下排列：

1.比较重要性

1.作者样式中的!important样式 IE版本太低不支持，打破了优先级原则，只要有它在它就是最高的

<style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            margin: 0 auto;
            /* 此时按权重值来算的话  字体颜色应该是蓝色  但是因为我加了!important  所以字体颜色是红色 */
            color: red !important;
        }
    </style>
</head>

<body>
    <div class="box" style="color: darkblue;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, officia?</div>
</body>

</html>

运行结果：
在这里插入图片描述

2.作者样式表中设置的样式，程序员设置的样式比浏览器的重要

3.其次再是浏览器默认表中的样式

2.比较特殊性

看选择器，选择器的优先级，

规则：通过选择器，计算出一个四位数的选择器（xxxx）

我们把特殊性分为4个等级，每一个等级代表一类选择器，每个等级的值相加得出选择器的权重。

4个等级的定义如下：

第一等级：代表内联样式，如style=""，权值为 1000
第二等级：代表id选择器，如#content，权值为100
第三等级：代表类，伪类和属性选择器，如.content，权值为10
第四等级：代表标签选择器和伪元素选择器，如div p，权值为1

注意：四个数不是十进制的数，不要看进位的情况

选择器选择的范围越小越精确，优先级就越高

例子：

注意:我们在行内样式设置的字体样式是黑色
id选择器设置的是紫色
类选择器的是红色
元素选择器的是绿色

 <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            margin: 0 auto;
            /* 红色 */
            color: red;
        }
        
        #box {
            /* 紫色 */
            color: blueviolet;
        }
        
        div {
            /* 绿色 */
            color: darkgreen;
        }
    </style>
</head>

<body>
    <!-- 黑色 -->
    <div class="box" id="box" style="color: black;">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, asperiores!
    </div>
</body>