假设我有这个表：
@H_502_17@解决方法
<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 */
}
