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

Question

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

3

I have the following markup:

<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的每个子元素，但不包括class-1的子元素。这是我的样式表的一部分：

.class-2 .class-5,
.class-3 .class-5,
.class-4 .class-5 {
  color: #fff;
}

这个不起作用，我也不确定为什么。我认为规则没有被覆盖。

更新

正如AndrewBone指出的那样，规则似乎在最小示例中有效。我现在明白了问题所在，但我不知道该怎么解决：

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

这里是JSFiddle的示例。

解决方案

Vucko指出，h1类型选择器具有更高的优先级，因此规则将不会被应用。因此，为了避免列出所有可能的组合，应使用*选择器！

最终结果：

.class-2 .class-5 *,
.class-3 .class-5 *,
.class-4 .class-5 *{
  color: #fff;
}

感谢Paulie_D和David Wilkinson教我关于:not伪选择器的知识。

- goncalotomas

1

https://jsfiddle.net/link2twenty/xxt2hytg/ 这不是你想要的结果吗？ - Andrew Bone

你也可以使用:not选择器，但它是一个棘手的选择器。.class-xxx类的div是body的直接子元素吗？还是它周围有任何包装器？注意：您的选择器应根据属性（例如，color不应该有问题，因为子元素将从父元素继承它），:not将帮助您用更少的代码实现它。 - Harry

尝试 https://jsfiddle.net/xxt2hytg/3/ - tkay

@AndrewBone 是的，看起来我的规则是正确的。然而，我无法达到我想要的结果。我将在帖子中更新更多信息。 - goncalotomas

3个回答

2

如果你有一些用于那些

的容器，你可以使用: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

- Vucko

h1 的样式会覆盖其他样式。这里有更多关于 CSS 选择器优先级的信息（MDN）。 - Vucko

我想将这个规则应用到 h1，h2，...，p 等等。这是使用 !important 的好借口吗？还是有比列出所有可能的组合更清晰的方法？ - goncalotomas

哇，我不知道你可以在CSS中使用*作为通配符。Vucko玩得很好！ - goncalotomas

1

使用 * 时要小心，它可能会引起很多问题 :) 此外，请查看此CSS特异性计算器。还有，:not 在大多数浏览器上都有良好的支持（包括IE9及以上版本）。 - Vucko

我相信它适用于这个例子。非常感谢你的帮助！ :) - goncalotomas

2

这个方法可以解决问题：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选择器非常强大，可以明显地针对不属于某个类的元素。

- David Wilkinson

非常优雅的解决方案。但是性能如何？:not（或伪选择器）是否有性能开销？ - goncalotomas

1

我不确定是否有关于:not的具体内容，但这里有一个关于CSS开销和性能的好资源：https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/ - David Wilkinson

谢谢分享链接！非常有用！:) - goncalotomas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paulie_D · Accepted Answer

这将解决它...

  [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>