关于css important属性的一些想法

最新推荐文章于 2025-08-31 12:22:21 发布

原创最新推荐文章于 2025-08-31 12:22:21 发布 · 442 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #继承

css学习专栏收录该内容

10 篇文章

订阅专栏

本文介绍了CSS中的继承特性，特别是就近原则的应用。通过实例说明了当子元素未直接指定样式时，将继承最近父元素的样式，且important声明不会影响这一过程。

css继承中有一个就近原则，首先来说important属性无法影响就近原则。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            color:red;
        }
        ul{
            color:green;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>什么颜色</li>
        </ul>
    </div>
</body>
</html>

在这段代码中，li没有明确的设置color属性，这个时候就会进行继承，css继承会进行一个就近原则，也就是说

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        ul{
            color:green;
        }
            div{
            color:red;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>什么颜色</li>
        </ul>
    </div>
</body>
</html>

这两段代码运行结果是一样的，都是绿色，因为ul在结构上更靠近li
。而且如果出现important也不会影响运行结果。也就是说important无法影响css继承中就近原则的计算。
important标签提上的是一个属性而不是选择器。也就是说如果没有选择到，important没有作用，important无法影响继承来的属性