javascript - 如何在不将 scoped 放在样式标签上的情况下将 css 范围限定为 div？

Question

我迫切需要将我的 css 限定到特定的 div。

我想要的是让我在某个 div 中的样式只影响该 div 中的任何内容，而不会影响它之外的任何内容。

例子:

        <style>
            p {
                color: red;
            }
        </style>
        <div class="global">
            <p>I am styled by the global styling!</p>
        </div>
        <div class="scoped">
            <style>
                p{
                    color: blue;
                    background: green;
                }
            </style>
            <p>These scoped styles do not affect the global styles</p>
        </div>

我知道将 scoped 放在 style 标签上，但浏览器支持远未接近实际使用。

因此，我想知道是否可以通过其他方式(例如 JavaScript)实现此目的？

谢谢!

编辑:

我不是在寻找通过在它前面放置一个类来确定它的范围，比如 .scoped p。我需要它是动态的，我不能将 .scoped 放在所有标签的前面。

Answer 1

使用 CSS 类怎么样？例如:

/* This only applies to p inside div with class 'global' */
div.global p {
    color: red;
}

/* This only applies to p inside div with class 'scoped' */
div.scoped p{
    color: blue;
    background: green;
}

如果您希望所有 p 都具有全局样式并且仅作用域具有单独的样式，请保持 p 规则不变并创建作用域规则:

/* This rule applies to all p elements */
p {
    color: red;
}

/* This style overrides style of p inside div with class 'scoped' */
div.scoped p{
    color: blue;
    background: green;
}