Html 是否只有第一个直接子级的 CSS 选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2094508/
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
Is there a CSS selector for the first direct child only?
提问by Jeremy
I have the following html
我有以下 html
<div class="section">
<div>header</div>
<div>
contents
<div>sub contents 1</div>
<div>sub contents 2</div>
</div>
</div>
And the following style:
以及以下样式：
DIV.section DIV:first-child
{
...
}
For some reason that I don't understand the style is getting applied to the "sub contents 1"<div>as well as the "header"<div>.
出于某种原因，我不明白该样式被应用于"sub contents 1"<div>以及"header"<div>。
I thought that the selector on the style would only apply to the first direct child of a div with a class called "section". How can I change the selector to get what I want?
我认为样式上的选择器仅适用于具有名为“section”的类的 div 的第一个直接子级。如何更改选择器以获得我想要的？
回答by Matchu
What you posted literally means "Find any divs that are inside of section divs and are the first child of their parent." The sub contains one tag that matches that description.
您发布的字面意思是“查找位于部分 div 内并且是其父级的第一个子级的任何 div。” sub 包含一个与该描述匹配的标签。
It is unclear to me whether you want both children of the main div or not. If so, use this:
我不清楚你是否想要主 div 的两个孩子。如果是这样，请使用：
div.section > div
If you only want the header, use this:
如果您只想要标题，请使用：
div.section > div:first-child
Using the >changes the description to: "Find any divs that are the direct descendents of section divs" which is what you want.
使用将>描述更改为：“查找作为部分 div 的直接后代的任何 div”，这就是您想要的。
Please note that all major browsers support this method, except IE6. If IE6 support is mission-critical, you will have to add classes to the child divs and use that, instead. Otherwise, it's not worth caring about.
请注意，除 IE6 外，所有主流浏览器都支持此方法。如果 IE6 支持是关键任务，则必须向子 div 添加类并使用它。否则，不值得在意。
回答by Tom Gullen
Found this question searching on Google. This will return the first child of a element with class container, regardless as to what type the child is.
在谷歌上搜索发现这个问题。这将返回 class 元素的第一个子元素container，无论子元素是什么类型。
.container > *:first-child
{
}
回答by Doug Neiner
CSS is called Cascading Style Sheets because the rules are inherited. Using the following selector, willselect just the direct child of the parent, but its rules will be inheritedby that div's children divs:
CSS 之所以称为层叠样式表，是因为规则是继承而来的。使用下面的选择，将只选择父母的直接孩子，但它的规则将被继承由div的孩子divs：
div.section > div { color: red }
Now, both that divandits children will be red. You need to cancel out whatever you set on the parent if you don't want it to inherit:
现在，它div和它的孩子都将是red. 如果您不希望它继承，则需要取消在父级上设置的任何内容：
div.section > div { color: red }
div.section > div div { color: black }
Now only that single divthat is a direct child of div.sectionwill be red, but its children divswill still be black.
现在只有div作为 的直接子代的那个单曲是div.section红色的，但它的子代divs仍然是黑色的。
回答by ЯegDwight
Use div.section > div.
使用div.section > div.
Better yet, use an <h1>tag for the heading and div.section h1in your CSS, so as to support older browsers (that don't know about the >) andkeep your markup semantic.
更好的是，<h1>在标题和div.section h1CSS 中使用标签，以支持较旧的浏览器（不知道>）并保持标记语义。
回答by eozzy
div.section > div
回答by Matt Parkins
The CSS selector for the direct first-child in your case is:
在您的情况下，直接第一个孩子的 CSS 选择器是：
.section > :first-child
The direct selector is > and the first child selector is :first-child
直接选择器是 > 而第一个子选择器是 :first-child
No need for an asterisk before the : as others suggest. You could speed up the DOM searching by modifying this solution by prepending the tag:
正如其他人所建议的那样，在 : 之前不需要星号。您可以通过添加标签来修改此解决方案来加速 DOM 搜索：
div.section > :first-child
