为什么以下两种代码显示的结果一样？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>后代选择器</title>
<style type="text/css">
p span{
color:blue;
}
</style>
</head>
<body>
<p>这是最外层的文字，<span>这是中间层的文字，<b>这是最内层文字。</b></span></p>
</body>
</html>和
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>后代选择器</title>
<style type="text/css">
p>span{
color:blue;
}
</style>
</head>
<body>
<p>这是最外层的文字，<span>这是中间层的文字，<b>这是最内层文字。</b></span></p>
</body>
</html>为什么显示的结果是相同的
qq_生活就要屁颠屁颠滴过O_0浏览 2287回答 7
7回答
-
FanlyBaby
<p>这是最外层的文字，<span>儿子<span>孙子</span></span></p>p>span只能选到儿子辈的标签，而p span则能把p下面的span标签都选中。 -
慕粉2130247522
子代选择器：只对应用对象的直接相应子节点有效。 后代选择器：对应用对象内的所有相应子节点都有效。 但是你这里只有一个后代，相当于一个儿子，所以选择出来就一样。你再在里面加一个子节点，你就会发现不同了。子代只能选择父本的儿子，而不能选择儿子的儿子。但是后代选择器可以一起选上，相当于把儿子和孙子一起选了。 -
王小错
最简单的解释就是：p span选择器控制的是p标签内所有的span标签，不过这个span被嵌套了多少层而p>span控制的是该p标签下一层为span标签的标签，这个span不能被嵌套在其他标签里，必须是p的儿子 -
_蓝色信仰
p span{} 这是后代选择器。HTML结构可以是这样子的12345 <p>这是 <span>一个 <span>很重要的提示：我也是P元素的后代</span> </span></p> p>span{} 这是子代元素。HTML结构可以是这样子的1234 <p>我的子代元素 <span>我是p元素的子代元素</span> <span>我也是p元素的子代元素</span></p> -
qq_药药_0
楼上回答对的。 -
xdlumia
你如果把给span里面再写一个span标签 就不一样了 -
陌上人如玉_010
这两种写法都是选中了span元素，当然一样的了，p span{} 这是后代选择器，p>span是子代选择器
随时随地看视频慕课网APP
CSS3
Html/CSS