多个子元素的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在其中:

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