CSS 子选择器与后代选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1182189/
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 Child vs Descendant selectors
提问by iceangel89
I am a bit confused between these 2 selectors.
我对这两个选择器有点困惑。
Does the descendentselector:
后代选择器是否：
div p
select all pwithin a divwhether or not it's an immediate descedent? So if the pis inside another divit will still be selected?
p在 a 中选择所有div是否是直接后代？那么如果p在另一个里面，div它仍然会被选中吗？
Then the childselector:
然后是子选择器：
div > p
Whats the difference? Does a child mean immediatechild? Eg.
有什么不同？孩子是指直系孩子吗？例如。
<div><p>
vs
对比
<div><div><p>
will both be selected, or not?
两者都会被选中，还是不会？
回答by RichieHindle
Just think of what the words "child" and "descendant" mean in English:
想想“孩子”和“后代”这两个词在英语中的意思：
- My daughter is both my child and my descendant
- My granddaughter is not my child, but she is my descendant.
- 我的女儿既是我的孩子也是我的后代
- 我的孙女不是我的孩子，但她是我的后代。
回答by ?a?da? Tekin
Yes, you are correct. div pwill match the following example, but div > pwill not.
是的，你是对的。div p将匹配以下示例，但div > p不会。
<div><table><tr><td><p> <!...
The first one is called descendant selectorand the second one is called child selector.
回答by Ignas2526
Bascailly, "a b" selects all b's inside a, while "a>b" selects b'swhat are only children to the a, it will not select bwhat is child of bwhat is child of a.
Bascailly，“ AB”所有选择B的内部，而“ A> B”选择B的东西只是孩子的一个，也不会选择b什么是孩子b是什么的孩子一个。
This example illustrates the difference:
这个例子说明了不同之处：
div span{background:red}
div>span{background:green}
<div><span>abc</span><span>def<span>ghi</span></span></div>
Background color of abcand defwill be green, but ghiwill have red background color.
abc和def 的背景颜色将为绿色，但ghi将具有红色背景颜色。
IMPORTANT:If you change order of the rules to:
重要提示：如果您将规则的顺序更改为：
div>span{background:green}
div span{background:red}
All letters will have red background, because descendant selector selects child's too.
所有字母都有红色背景，因为后代选择器也会选择孩子的。
回答by Snowcrash
In theory:Child => an immediate descendant of an ancestor (e.g. Joe and his father)
理论上：孩子 => 祖先的直系后代（例如乔和他的父亲）
Descendant => any element that is descended from a particular ancestor (e.g. Joe and his great-great-grand-father)
后代 => 来自特定祖先的任何元素（例如乔和他的曾曾祖父）
In practice:try this HTML:
在实践中：试试这个 HTML：
<div class="one">
<span>Span 1.
<span>Span 2.</span>
</span>
</div>
<div class="two">
<span>Span 1.
<span>Span 2.</span>
</span>
</div>
with this CSS:
使用这个 CSS：
span { color: red; }
div.one span { color: blue; }
div.two > span { color: green; }
回答by rlovtang
Be aware that the child selector is not supported in Internet Explorer 6. (If you use the selector in a jQuery/Prototype/YUI etc selector rather than in a style sheet it still works though)
请注意 Internet Explorer 6 不支持子选择器。（如果您在 jQuery/Prototype/YUI 等选择器中而不是在样式表中使用选择器，它仍然可以工作）
回答by user3351229
div p
Selects all 'p' elements where the parent is a 'div' element
选择所有父元素是“div”元素的“p”元素
div > p
It means immediate children Selects all 'p' elements where the parent is a 'div' element
这意味着直接子元素选择所有父元素是“div”元素的“p”元素
回答by Aravind Cheekkallur
CSS selection and applying style to a particular element can be done through traversing through the dom element [Example
CSS 选择和将样式应用于特定元素可以通过遍历 dom 元素来完成 [示例
.a .b .c .d{
background: #bdbdbd;
}
div>div>div>div:last-child{
background: red;
}
<div class='a'>The first paragraph.
<div class='b'>The second paragraph.
<div class='c'>The third paragraph.
<div class='d'>The fourth paragraph.</div>
<div class='e'>The fourth paragraph.</div>
</div>
</div>
</div>
