如何用容器div的样式覆盖CSS类的样式？

先看原始HTML代码：

<html>
    <head>
        <style>
            .text-box {
                color: red;
            }
        </style>
    </head>
    <body>
        <p class="text-box">Hello</p>
        <div style="font-weight: bold;">
            <p class="text-box">Hello</p>
        </div>
        <div style="color: blue;"> 
            <p class="text-box">Hello</p>
        </div>
    </body>
</html>

当前效果：三个段落均显示红色，第二个段落同时加粗；第三个段落的父容器虽设置了蓝色文本，但由于类选择器.text-box的优先级高于继承自父元素的样式，所以依然保持红色。

以下是几种可行的调整方案：

方法1：用后代选择器提升优先级 #

给第三个容器div添加专属类名，编写更具特异性的CSS选择器，其优先级会高于单独的.text-box类：

修改后的代码：

<html>
    <head>
        <style>
            .text-box {
                color: red;
            }
            /* 特异性更高的后代选择器，优先级超过单独类 */
            .color-override .text-box {
                color: blue;
            }
        </style>
    </head>
    <body>
        <p class="text-box">Hello</p>
        <div style="font-weight: bold;">
            <p class="text-box">Hello</p>
        </div>
        <div class="color-override" style="color: blue;"> 
            <p class="text-box">Hello</p>
        </div>
    </body>
</html>

方法2：利用inherit关键字调整继承逻辑 #

如果希望.text-box默认继承父元素颜色，仅给需要红色的段落单独设置样式：

<html>
    <head>
        <style>
            .text-box {
                color: inherit; /* 默认继承父元素颜色 */
            }
            .text-red {
                color: red; /* 给需要红色的段落单独加类 */
            }
        </style>
    </head>
    <body>
        <p class="text-box text-red">Hello</p>
        <div style="font-weight: bold;">
            <p class="text-box text-red">Hello</p>
        </div>
        <div style="color: blue;"> 
            <p class="text-box">Hello</p>
        </div>
    </body>
</html>

方法3：用!important强制覆盖（不推荐） #

如果临时需要快速生效，可以在目标样式中加!important，但会破坏CSS优先级规则，不利于后期维护：

<html>
    <head>
        <style>
            .text-box {
                color: red;
            }
            .color-override .text-box {
                color: blue !important;
            }
        </style>
    </head>
    <body>
        <p class="text-box">Hello</p>
        <div style="font-weight: bold;">
            <p class="text-box">Hello</p>
        </div>
        <div class="color-override" style="color: blue;"> 
            <p class="text-box">Hello</p>
        </div>
    </body>
</html>

原理说明 #

CSS优先级由选择器特异性决定：单独类选择器的特异性为(0,1,0)，后代选择器.color-override .text-box的特异性为(0,2,0)，后者更高，因此会覆盖原有样式。

内容的提问来源于stack exchange，提问作者brownandrew15