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

t2a7ltrp 于 2023-02-10 发布在其他

关注(0)|答案(3)|浏览(141)

我有这个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>

产生

第二个段落按预期工作，因为段落元素没有要覆盖的字体粗细样式。
有没有办法覆盖CSS优先级顺序，让容器div中定义的样式覆盖第三段中的类，从而使文本变为蓝色？

css

来源：https://stackoverflow.com/questions/75363497/how-to-override-css-class-with-container-div-style

3条答案

按热度按时间

2hh7jdfx1#

你实际上是在问你是否可以覆盖一个CSS规则。显然答案是否定的。CSS在我看来的思考方式是正确的，即你可以在容器上设置规则，但同时你也可以在孩子身上设置规则。优先级说明了孩子身上的规则胜过父亲，所以如果你不需要孩子身上的CSS规则，为什么要设置它呢？
您的目标与此代码：

<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 >Hello</p>
        </div>
    </body>
</html>

赞(0）回复(0）举报 2023-02-10

wdebmtf22#

你可以给父div一个类，然后把第三段的颜色定为蓝色

<html>
    <head>
        <style>
            .text-box {
                color: red;
            }
            .text-boxDiv .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="text-boxDiv"> 
            <p class="text-box">Hello</p>
        </div>
    </body>
</html>

赞(0）回复(0）举报 2023-02-10

hxzsmxv23#

<div> 
    <p class="text-box" style="color:blue;">Hello</p>
</div>

您必须直接将color属性赋予div标记中的p标记
或者您可以将class添加到div并执行以下操作：

/* CSS */
.myDiv > p {
    color: blue;
}

赞(0）回复(0）举报 2023-02-10

我来回答

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

3条答案

相关问题

热门标签

最新问答