多个子元素的 CSS 选择器答案

【问题标题】：CSS selector for multiple sub-elements多个子元素的 CSS 选择器
【发布时间】：2023-03-30 21:45:01
【问题描述】：

假设我有这张桌子：

<table class="live_grid">
    <tr>
        <td>
            <h3>Something!</h3>
        </td>
    </tr>
</table>

如果我想在表格中设置<h3> 的样式，我可以使用这个 CSS 选择器：

.live_grid h3 {

}

这很好用。如果我想为该表中的所有标题设置样式，就会出现问题。我试过这个：

.live_grid h1,h2,h3,h4,h5,h6 {

}

这似乎将我的表中不在的标题与live_grid的类匹配。

我确信这是一个简单的问题，就在我面前。你能指出我做错了什么吗？

【问题讨论】：

如果您的 HTML 的结构使得您可以在选择标题时选择一种模式，例如标题始终是第一个tr 中每个td 的第一个孩子，您可以执行.live_grid tr:first-child > td > :first-child 之类的操作。伪类是一个有趣的实验工具；）
这能回答你的问题吗？ Can I target all <H> tags with a single selector?

标签： css css-selectors

【解决方案1】：

现代选项

注意：它可能与旧版浏览器不兼容：

.live_grid :is(h1,h2,h3,h4,h5) {
    /* style here */
}

有关:is()的更多信息，请参见此处：https://developer.mozilla.org/en-US/docs/Web/CSS/:is

标准选项：

如果您想为该类中的所有标题设置样式，则必须这样做（也可以在没有换行符的情况下完成）。注意每个选择器都有.live_grid：

.live_grid h1,
.live_grid h2,
.live_grid h3,
.live_grid h4,
.live_grid h5,
.live_grid h6 {
    /* style here */
}

当您用逗号分隔事物时，它们彼此独立 - 因此需要再次引用该类。

例如：

#myDiv1, .live_grid, #myDiv2 {
    color: blue;
}

这会将#myDiv1 元素中的所有内容、#myDiv2 元素中的所有内容以及.live_grid 元素中的所有内容的文本颜色设置为蓝色。

这也解释了您的 CSS 匹配所有标题的原因 - 您单独引用它们，用逗号分隔 - 它们的包含元素没有选择器。

CSS 预处理器选项

或者，您始终可以使用 LESS 或 SASS 之类的东西，这样您就可以编写如下嵌套规则：

#live_grid {
    h1, h2, h3, h4, h5, h6 {
        /* style here */
    }
}

自定义类选项

最后，您可以在所有标题中添加一个类，然后引用该类：

<-- HTML -->
<h1 class="custom-header">Title of Blog Post</h1>
<h2 class="custom-header">Subtitle of Blog Post about Pizza</h2>

/* CSS */
.custom-header {
    /* style here */
}

【讨论】：

当然！我是个白痴。感谢 Dave，以及所有回答的人。
有一个更简单的方法：stackoverflow.com/a/62396051/41688
@BryanH 是的，好电话。不知道那是不是大约 10 年前我回答这个问题时，但这肯定是一个不错的选择。我已添加到答案中，谢谢。

【解决方案2】：

.live_grid h1,
.live_grid h2,
...

你懂的

【讨论】：

【解决方案3】：

不幸的是，您需要单独定位每个标题，或者只为其分配一个类。

.live_grid h1,
.live_grid h2,
.live_grid h3,
.live_grid h4,
.live_grid h5,
.live_grid h6 {
}

我只是为标题分配一个类，或者具体说明您实际想要定位的标题。

【讨论】：

【解决方案4】：

试试这个：

.live_grid h1,
.live_grid h2,
.live_grid h3,
.live_grid h4,
.live_grid h5,
.live_grid h6 {}

【讨论】：

【解决方案5】：

代码

  .live_grid h1,h2,h3,h4,h5,h6 {}

只会选择 .live_grid 中的 h1。使用

.live_grid h1,.live_grid h2,.live_grid h3,.live_grid h4,.live_grid h5,.live_grid h6 {}

来自亚当·罗伯茨的“Selector Grouping”：

我们可以将逗号视为逻辑 OR 运算符，但重要的是要记住，组中的每个选择器都是自主的。一个常见的初学者错误是这样编写组：

#foo td, th {
⋮ declarations
}

初学者可能会认为上面的声明块将应用于 ID 为“foo”的元素的后代的所有 td 和 th 元素。但是，上面的选择器组其实是等价的：

#foo td {
⋮ declarations
 }
th {
⋮ declarations
}

要达到真正的目的，选择器组如下：

 #foo td, #foo th {
 ⋮ declarations
 }

【讨论】：

"代码只会选择 .live_grid 中的 h1" 以及每个 h2、h3、h4、h5 和 h6。
在抄袭别人的文章时，明确给予他们的肯定非常重要。

【解决方案6】：

每个标题标签都必须是合格的：

.live_grid h1, .live_grid h2, .live_grid h3, .live_grid h4, .live_grid h5, .live_grid h6

【讨论】：

【解决方案7】：

这是 CSS 最糟糕的地方之一。如果你想让 CSS 少一些你可以使用http://sass-lang.com/，它看起来像：

.live_grid {
  h1, h2, h3, h4, h5, h6 {
    /* styles here */
  }
}

【讨论】：

【解决方案8】：

 .live_grid h1,
 .live_grid h2,
 .
 .
 .

 .live_grid h6 { //now add your style here }

【讨论】：

【解决方案9】：

另一种解决方案是为您想要的每个 h 元素添加一个特殊的类到您的 html 标记中，然后在您的 CSS 中，您可以这样编写：

 .live_grid .myHeader
  {
        /* your styling */
  }

【讨论】：