Question

我有以下标记：

<div class="class-XXX">
  <div class="class-5">
    <!-- could be any text element -->
    <h1>Content</h1>
  </div>
</div>

为简单起见，我们假设class-XXX只能包含值class-1，class-2，class-3和class-4。
我想将规则color: #fff;应用于class-5的{{1}}个孩子，而class-1不是.class-2 .class-5, .class-3 .class-5, .class-4 .class-5 { color: #fff; }的孩子。这是我样式表的那部分：

h1

这不起作用，我不确定为什么。我不相信这条规则也被覆盖了。

更新

正如AndrewBone指出的那样，该规则似乎只是一个最小的例子。我现在明白了什么是错的，但我不知道如何解决它：

有一条规则适用于另一个CSS文件中的h1（无法删除），并且该规则的优先级高于我写的规则。我该如何解决这个问题？

这是an example JSFiddle。

解

Vucko指出*类型选择器具有更高的优先级，因此不会应用该规则。因此，为了避免列出所有可能的组合，应使用.class-2 .class-5 *, .class-3 .class-5 *, .class-4 .class-5 *{ color: #fff; }选择器！

最终结果：

:not

感谢Paulie_D和David Wilkinson教我关于{{1}}伪选择器。

Answer 1

这样做..

  [class^="class-"]:not(.class-1) .class-5 {
          */ your styles here */
        }

...但这仅适用于上述类名中的特定方法体。

[class^="class-"]:not(.class-1) .class-5 {

  color: red;

}

<div class="class-1">
  <div class="class-5">
    <!-- could be any text element -->
    <h1>Content</h1>
  </div>
</div>
<div class="class-2">
  <div class="class-5">
    <!-- could be any text element -->
    <h1>Content</h1>
  </div>
</div>
<div class="class-3">
  <div class="class-5">
    <!-- could be any text element -->
    <h1>Content</h1>
  </div>
</div>
<div class="class-4">
  <div class="class-5">
    <!-- could be any text element -->
    <h1>Content</h1>
  </div>
</div>
<div class="class-5">
  <div class="class-5">
    <!-- could be any text element -->
    <h1>Content</h1>
  </div>
</div>

Answer 2

如果您有divs的容器，则可以使用:not选择器（正如Harry在评论中提到的那样）：

.main :not(.class-1) .class-5 {
  color: red;
}

<div class="main">
  <div class="class-1">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>1</h1>
    </div>
  </div>
  <div class="class-2">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>2</h1>
    </div>
  </div>
  <div class="class-3">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>3</h1>
    </div>
  </div>
  <div class="class-4">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>4</h1>
    </div>
  </div>
  <div class="class-5">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>5</h1>
    </div>
  </div>
</div>

.main :not(.class-1) .class-5 {
  color: red;
}

JSFiddle

Answer 3

这就是诀窍：https://jsfiddle.net/023rox1k/

CSS：

.wrapper :not(.class-1) .class-5 {
  color: blue;
}

HTML：

<div class="wrapper">
  <div class="class-1">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>Content</h1>
    </div>
  </div>
  <div class="class-2">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>Content</h1>
    </div>
  </div>
  <div class="class-3">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>Content</h1>
    </div>
  </div>
  <div class="class-4">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>Content</h1>
    </div>
  </div>
</div>

:not选择器非常强大，在这种情况下显然是针对特定类的元素。

将CSS规则应用于子类中的多个元素

3 个答案: