我有点搞不懂这两个选择器。
后代选择器:
div p
选择所有的p在一个div，无论它是否是直接下降?所以如果p在另一个div中，它仍然会被选中?
然后子选择器:
div > p
有什么不同?孩子是指直系子女吗?如。
<div><p>
vs
<div><div><p>
两者是否都被选中?
当前回答
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>
其他回答
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>
在你的问题中，Div > p匹配有Div父元素的ps - < Div ><p>
Div p匹配具有Div祖先(父母，祖父母，曾祖父母等)的ps -在您的问题中< Div ><p>和< Div >< Div ><p>
基本上，"a b"选择了a里面的所有b，而"a>b"选择了b的所有子元素，它不会选择b的子元素。
下面的例子说明了区别:
div span{background:red}
div>span{background:green}
<div><span>abc</span><span>def<span>ghi</span></span></div>
abc和def的底色为绿色，而ghi的底色为红色。
重要提示:如果你改变规则的顺序为:
div>span{background:green}
div span{background:red}
所有字母的背景都是红色的，因为后代选择器也会选择子字母。
想想“孩子”和“后代”在英语中的意思:
我的女儿既是我的孩子，也是我的后代 我的孙女不是我的孩子，但她是我的后代。
是的，你说得对。Div p将匹配下面的示例，但Div > p不匹配。
<div><table><tr><td><p> <!...
第一个是后代选择器，第二个是子选择器。
