多个子元素的 CSS 选择器

Question

假设我有这张桌子：

<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

类相匹配。

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

Answer 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 */
}

Answer 2

.live_grid h1,
.live_grid h2,
...

你明白了

Answer 3

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

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

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

Answer 4

试试这个：

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

Answer 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 {}

来自 Adam Roberts 的“选择器分组”：

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

#foo td, th {
⋮ declarations
}

初学者可能会认为上面的声明块将应用于所有 td 和 th 元素，这些元素是 ID 为“foo”的元素的后代。然而，上面的选择器组实际上相当于这个：

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

要实现真正的目标，请按如下方式编写选择器组：

 #foo td, #foo th {
 ⋮ declarations
 }

Answer 6

每个标题标签都必须经过限定：

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

Answer 7

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

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

Answer 8

 .live_grid h1,
 .live_grid h2,
 .
 .
 .

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

Answer 9

CSS 嵌套 可以用于此目的。检查浏览器支持我可以使用吗。

.live_grid {
  h1, h2, h3, h4, h5, h6 {
    text-decoration: underline;
  }
}

<table class="live_grid">
    <tr>
        <td>
            <h3>h3 in table</h3>
        </td>
        <td>
          <h2>h2 in table</h2>
        </td>
    </tr>
</table>
<h1>h1 outside table</h1>

Answer 10

另一种解决方案可能是为您想要的 html 标记中的每个

h

元素添加一个特殊的类，然后，在 CSS 中，您可以编写如下内容：

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