我已经为用户构建了一个编辑器,其中有一组样式供选择。 以本例为例,我们将其称为
.p1
和.p2
。我的问题是,它们会根据它们在样式表中出现的顺序相互覆盖。我无法找到解决这个问题的方法,因为我不知道这些面板可能嵌套在哪里。
注:此示例大大简化,我无法精确控制像a标签这样的内容的位置,它们可以嵌套在表格、列表、段落或任何其他标记中,而且深度也不确定。 这也适用于标题和任何需要自定义样式(例如H1、ul...)以在显示环境中呈现良好的子元素。
.p1 a {
color: red;
}
.p2 a {
color: green;
}
<div class="pl p2">
<a href="#">Hello 2</a>
<div class="pl p1">
<a href="#">Hello 2-1</a>
<div class="pl p2">
<a href="#">Hello 2-1-2</a>
</div>
</div>
</div>
<div class="pl p1">
<a href="#">Hello 1</a>
<div class="pl p2">
<a href="#">Hello 1-2</a>
<div class="pl p1">
<a href="#">Hello 1-2-1</a>
</div>
</div>
</div>
我已经尝试使用:not选择器和在子元素上使用all:default,但都没有成功。
.forP1
和.forP2
添加到<a>
中。这样,您就可以编写p1 .forP1 {...}
和p2 .forP2 {...}
。这是您可以做的。 - Junaid