多个子元素的 CSS 选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6574031/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS selector for multiple sub-elements
提问by Brad
Let's say I have this table:
假设我有这张桌子：
<table class="live_grid">
<tr>
<td>
<h3>Something!</h3>
</td>
</tr>
</table>
If I want to style the <h3>within the table, I can use this CSS selector:
如果我想<h3>在表格中设置样式，我可以使用这个 CSS 选择器：
.live_grid h3 {
}
This works fine. The trouble pops up if I want to style all headings in that table. I have tried this:
这工作正常。如果我想为该表中的所有标题设置样式，就会出现问题。我试过这个：
.live_grid h1,h2,h3,h4,h5,h6 {
}
This seems to match headings that are notwithin my table with the class of live_grid.
这似乎将不在我的表格中的标题与live_grid.
I'm sure this is a simple problem and right in front of me. Can you point out what I'm doing wrong?
我相信这是一个简单的问题，就在我面前。你能指出我做错了什么吗？
回答by Dave
Standard Option:
标准选项：
If you want to style all the headers in that class, you have to do it like this (which could also be done without the line breaks). Notice each selector has .live_gridin it:
如果要为该类中的所有标题设置样式，则必须这样做（也可以在没有换行符的情况下完成）。注意每个选择器中都有.live_grid：
.live_grid h1,
.live_grid h2,
.live_grid h3,
.live_grid h4,
.live_grid h5,
.live_grid h6 {
/* style here */
}
When you comma separate things, they're independent of each other - hence the need to reference the class again.
当您用逗号分隔事物时，它们彼此独立 - 因此需要再次引用该类。
For example:
例如：
#myDiv1, .live_grid, #myDiv2 {
color: blue;
}
This would set the text-color for everything in the #myDiv1element, everything in the #myDiv2element, and everything in the .live_gridelement to having text color blue.
这将为#myDiv1元素中的所有内容、元素中的所有内容以及#myDiv2元素中的所有.live_grid内容设置文本颜色为蓝色。
This also explains the reason your CSS is matching all the headers - you're referencing them individually, separated by commas - there is no selector for their containing element(s).
这也解释了您的 CSS 匹配所有标题的原因 - 您单独引用它们，用逗号分隔 - 它们的包含元素没有选择器。
CSS pre-processor option
CSS 预处理器选项
Or, you can always go with something like LESSor SASSwhich allows you to write nested rules something like this:
或者，您始终可以使用LESS或SASS 之类的东西，它们允许您编写如下嵌套规则：
#live_grid {
h1, h2, h3, h4, h5, h6 {
/* style here */
}
}
Custom class option
自定义类选项
Lastly, you could add a class to all of your headers and just refer to that class:
最后，您可以向所有标头添加一个类，然后仅引用该类：
<-- 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 */
}
回答by kei
.live_grid h1,
.live_grid h2,
...
you get the idea
你明白了
回答by Puzo
Try this one:
试试这个：
.live_grid h1,
.live_grid h2,
.live_grid h3,
.live_grid h4,
.live_grid h5,
.live_grid h6 {}
回答by Wesley Murch
Unfortunately, you'll need to target each heading separately, or just assign a class to it.
不幸的是，您需要分别针对每个标题，或者只是为其分配一个类。
.live_grid h1,
.live_grid h2,
.live_grid h3,
.live_grid h4,
.live_grid h5,
.live_grid h6 {
}
I would just assign a class to the heading, or be specific about which headings you actually want to target.
我只会为标题分配一个类，或者具体说明您实际想要定位的标题。
回答by Jawad
The code
编码
.live_grid h1,h2,h3,h4,h5,h6 {}
will only select the h1 that is with in .live_grid. Use
只会选择 .live_grid 中的 h1。用
.live_grid h1,.live_grid h2,.live_grid h3,.live_grid h4,.live_grid h5,.live_grid h6 {}
From Adam Roberts' "Selector Grouping":
来自 Adam Roberts 的“选择器分组”：
We can think of the comma as a logical OR operator, but it's important to remember that each selector in a group is autonomous. A common beginner's mistake is to write groups like this:
我们可以将逗号视为逻辑 OR 运算符，但重要的是要记住组中的每个选择器都是自治的。一个常见的初学者错误是像这样编写组：
#foo td, th {
? declarations
}
A beginner might think that the above declaration block will be applied to all td and th elements that are descendants of the element with an ID of "foo". However, the selector group above is actually equivalent to this:
初学者可能会认为上面的声明块将应用于所有 td 和 th 元素，这些元素是 ID 为“foo”的元素的后代。但是，上面的选择器组实际上等价于这个：
#foo td {
? declarations
}
th {
? declarations
}
To achieve the true goal, write the selector group as follows:
为了达到真正的目标，将选择器组写成如下：
#foo td, #foo th {
? declarations
}
回答by tybro0103
That's one of the things that sucks about CSS. If you want CSS to suck less you can use http://sass-lang.com/and it will look like:
这是 CSS 令人讨厌的事情之一。如果你想让 CSS 少一点，你可以使用http://sass-lang.com/，它看起来像：
.live_grid {
h1, h2, h3, h4, h5, h6 {
/* styles here */
}
}
回答by kinakuta
each heading tag has to be qualified:
每个标题标签都必须被限定：
.live_grid h1, .live_grid h2, .live_grid h3, .live_grid h4, .live_grid h5, .live_grid h6
回答by SMK
.live_grid h1,
.live_grid h2,
.
.
.
.live_grid h6 { //now add your style here }
回答by yoav barnea
Another solution could be to add a special class for every helement you want to your html markup, and then, in your CSS, you can write somthing like this:
另一种解决方案可能是为h您想要的每个元素添加一个特殊的类到您的 html 标记中，然后，在您的 CSS 中，您可以编写如下内容：
.live_grid .myHeader
{
/* your styling */
}
