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

标签 css css-selectors

我有以下标记:

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

为简单起见,假设 class-XXX 只能具有值 class-1class-2class -3class-4
我想将规则 color: #fff; 应用到 class-5 的每个子级,而不是 class-1 的子级。这是我的样式表的一部分:

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

这行不通,我也不确定为什么。我也不认为规则会被覆盖。

更新

正如 AndrewBone 所指出的,该规则似乎适用于一个最小的示例。我现在知道出了什么问题,但我不知道如何解决:

另一个 CSS 文件中的 h1 应用了一条规则(无法删除),并且该规则的优先级高于我编写的规则。我该如何解决这个问题?

这里是 an example JSFiddle .

解决方案

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

最终结果:

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

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

最佳答案

这样就可以了..

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

关于css - 将 CSS 规则应用于子类中的多个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34676903/

相关文章:

jquery - 当我的窗口滚动> 50时如何添加:hover on my class .事件

css - 动态 :last-child in SASS

css - 为什么像 a[title ="home"] 这样的选择器比使用 class 慢?

php - 我如何使用 php 动态更改 html div 的宽度?

html - 用无序列表替换表格

html - CSS Following Siblings 选择器

css-selectors - 我怎样才能选择除最后一个 child 之外的元素的所有 child ?

html - 是否只有第一个直接子级的 CSS 选择器?

CSS Flexbox - 当一列包含多个部分时高度相同吗?

css - IE 8 PNG正文背景问题