javascript - 针对特定的 CSS 类集

Question

我的文档中有两个元素实例。一个是只有一类 slide，另一个是一类 slide 和 slide--current。下面是此标记的示例。

<div class="slide slide--current">
  <h2 class="title title--centered title--modifier">Slide 1</h2>
  <div class="text-block">
    <p>text</p>
  </div>
</div>

<div class="slide">
  <h2 class="title title--centered title--modifier">Slide 2</h2>
  <div class="text-block">
    <p>text</p>
  </div>
</div>

如果我想在 slide--current 作为父级时定位 text-block，我会使用 .slide--current > .text- block 作为我的选择器。 但是，如果我想在没有 slide--current 时定位 text-block 怎么办？ 我问是因为这两个元素都需要始终将 slide 类应用于它们。如果我使用 .slide .text-block 样式将在不应该应用到 slide--current 时应用。这是 :not() 选择器的情况吗？

Answer 1

您可以使用伪选择器:

.slide:not(.slide--current) {
    // styling here
}

在您的情况下，只要 .text-block 始终是 .slide 的直接子级:

.slide > .text-block {
    // Apply to all text blocks regardless of state of slide
}

.slide:not(.slide--current) > .text-block {
    // Only applied if parent slide is not current
}

您可能会通过阅读@Rounin 的答案来获得相同的结果，并通过反转您的思维过程并首先为所有文本 block 设置一些基本样式然后在当前幻灯片时覆盖它们来避免伪选择器。