CSS控制级联

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

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

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

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

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

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

<div class="p2">
  <a href="#">Hello 2</a>
  <div class="p1">
    <a href="#">Hello 2-1</a>
    <div class="p2">
      <a href="#">Hello 2-1-2</a>
    </div>
  </div>
</div>
<div class="p1">
  <a href="#">Hello 1</a>
  <div class="p2">
    <a href="#">Hello 1-2</a>
    <div class="p1">
      <a href="#">Hello 1-2-1</a>
    </div>
  </div>
</div>