html - CSS 控制级联

Question

我已经构建了一个供用户使用的编辑器，它有多种样式可供选择，在本例中我们将它们称为 .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，但没有成功。

Answer 1

看起来您可能正在寻找的是直接子选择器 >。了解有关直接子选择器的更多信息 on MDN .

现场演示:

.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>