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>

我知道将stroped放在样式标记上，但是浏览器支持不是接近实际使用的地方。

正因为如此，我想知道是否有办法通过其他方式实现这一点，比如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;
}

Answer 2

分别选择每个班级：

.global p {
    color: red;
}

.scoped p{
    color: blue;
    background: green;
}

如何将css范围放到div而不在范围标记上放置范围？

2 个答案: