Question

我正在寻找一种解决问题的简洁方法：

假设我们有一篇文章，我希望为每个h1，h2设置样式，除非它们位于<div ="example">

<article class="article">
  <h1>Direct Child 1</h1>
  <h2>Direct Child 2</h2>

  <div class="example">
    <h1>Example Child 1</h1>
    <h2>Example Child 2</h2>
  </div>

  <div class="other-div">
    <h1>Indirect Child 1</h1>
    <h2>Indirect Child 2</h2>
  </div>
</div>

现在在纯CSS中解决方案很简单：

.article > h1,
.article *:not(.example) h1 {
  color: red;
}

.article > h2,
.article *:not(.example) h2 {
  color: blue;
}

所有h1为红色，h2为蓝色，除非它们在<div class=example>" - Pen

之内

然而，在我看来，我找不到干净的方式来做这件事。

.article {
  & :not(.example)  {
    h1 {
      color: red;
    }

    h2 {
      color:  blue;
    }
  }
}

我正在寻找一种方法，将<div class=article>"直接儿童h1和h2添加到混音中，同时保持干爽。

Answer 1

我猜你尝试的主要表现是限制较少要求选择器组合器（如>）始终在选择器元素之前（因此& >和{{1}单独可以工作）。但是有解决方法：

除非在某个div内，否则很少针对每个类型的元素

1 个答案: