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>

如果我想text-block作为父级slide--current，我会使用.slide--current > .text-block作为我的选择器。 但是，如果我想在没有text-block的情况下定位slide--current该怎么办？我问，因为这两个元素都需要应用类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的答案来获得相同的结果，并通过反转你的思维过程并为所有文本块设置一些基本样式然后在幻灯片是最新的时候覆盖它们来避免伪选择器。

Answer 2

但如果我想在没有@Override public boolean addAll(Collection<? extends Integer> e) { return super.addAll(e); }的情况下定位该怎么办呢？ text-block？

这是如何以正确的顺序在CSS中使用级联的一课。

slide--current

基本上，您从核心样式开始，随着上下文变得越来越具体，您将累积添加。

针对特定的CSS类集

2 个答案: