css（十）- important

最新推荐文章于 2025-04-22 08:48:22 发布

原创最新推荐文章于 2025-04-22 08:48:22 发布 · 222 阅读

0 ·

CC 4.0 BY-SA版权

WEB前端专栏收录该内容

15 篇文章

订阅专栏

本文深入探讨了CSS中!important声明的使用及其对元素样式的绝对覆盖能力。通过具体实例，展示了当多个类应用于同一元素时,!important如何决定最终的显示效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>important</title>
    <style type="text/css">
        /* !important:设置权重为无限大*/
        /* !important:不影响继承来的权重，只影响选中的元素*/
        p {
            color: red !important;
            font-size: 30px;
        }
        .spe1 {
            color: yellow;
            font-size: 40px;
        }
        .spe2 {
            color: green;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <p class="spe1 spe2">我是什么颜色</p>
        <p class="spe2 spe1">我是什么颜色</p>
    </div>
</body>
</html>