猿问

为什么以下两种代码显示的结果一样？

<!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
浏览 2532回答 7
7回答

FanlyBaby

<p>这是最外层的文字，<span>儿子<span>孙子</span></span></p>p>span只能选到儿子辈的标签，而p span则能把p下面的span标签都选中。
0

慕粉2130247522

子代选择器：只对应用对象的直接相应子节点有效。 后代选择器：对应用对象内的所有相应子节点都有效。 但是你这里只有一个后代，相当于一个儿子，所以选择出来就一样。你再在里面加一个子节点，你就会发现不同了。子代只能选择父本的儿子，而不能选择儿子的儿子。但是后代选择器可以一起选上，相当于把儿子和孙子一起选了。
0

王小错

最简单的解释就是：p span选择器控制的是p标签内所有的span标签，不过这个span被嵌套了多少层而p>span控制的是该p标签下一层为span标签的标签，这个span不能被嵌套在其他标签里，必须是p的儿子
0

兼容并包

p span{} 这是后代选择器。HTML结构可以是这样子的12345   <p>这是    <span>一个          <span>很重要的提示：我也是P元素的后代</span>    </span></p>   p>span{} 这是子代元素。HTML结构可以是这样子的1234   <p>我的子代元素    <span>我是p元素的子代元素</span>    <span>我也是p元素的子代元素</span></p>   
0

qq_药药_0

楼上回答对的。
0

xdlumia

你如果把给span里面再写一个span标签 就不一样了
0

陌上人如玉_010

这两种写法都是选中了span元素，当然一样的了，p span{} 这是后代选择器，p>span是子代选择器
0
随时随地看视频慕课网APP

相关问题

为什么字体颜色在Eclipse上没有变化 2 回答

相关分类

CSS3
Html/CSS
为什么字体颜色在Eclipse上没有变化 2 回答
我要回答