Question

我已经为用户构建了一个编辑器，它有一个可供选择的样式，在这个例子中我们称之为.p1和`.p2'。我遇到的问题是它们相互重叠，取决于它们在样式表中出现的顺序。

我找不到可以解决这个问题的方法，因为我不知道这些面板是如何嵌套的。

这个例子被大大简化了，我无法准确控制像标签这样的东西，它们可以嵌套在表格，列表，段落或任何其他任何深度的标签中。这也适用于标题和任何其他需要定制样式（例如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>

我玩过：不是选择器，也使用全部：默认，对儿童，但没有运气。

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>

Answer 2

您的示例有点令人困惑，因为它有2个类应用于同一个元素。

如果我理解正确，您希望 a 元素由DOM中最近的祖先设置样式。

如果是这种情况，解决方案是设置一组规则，其中具有两个类之一的祖先将始终匹配，因此具有最高特定性的规则将赢得....

很抱歉，但我找不到更好的解释方法......

HashMap

.p1 a, 
*[class^=p] .p1 a, 
*[class^=p] *[class^=p] .p1 a, 
*[class^=p] *[class^=p] *[class^=p] .p1 a 
{
	background-color: antiquewhite;
}

.p2 a, 
*[class^=p] .p2 a, 
*[class^=p] *[class^=p] .p2 a, 
*[class^=p] *[class^=p] *[class^=p] .p2 a 
{
	background-color: lightblue;
}

CSS控制级联

2 个答案: