多个子元素的CSS选择器

假设我有这个表：

<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类的标题.

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

解决方法

标准选项：

如果要对该类中的所有标题进行样式,则必须像这样做(也可以不进行换行).注意每个选择器都有.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,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 */
}