<!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>为什么显示的结果是相同的
7 回答
已采纳
FanlyBaby
TA贡献12条经验 获得超1个赞
<p>这是最外层的文字，<span>儿子<span>孙子</span></span></p>
p>span只能选到儿子辈的标签，而p span则能把p下面的span标签都选中。
慕粉2130247522
TA贡献2条经验 获得超1个赞
子代选择器：只对应用对象的直接相应子节点有效。
后代选择器：对应用对象内的所有相应子节点都有效。
但是你这里只有一个后代，相当于一个儿子，所以选择出来就一样。你再在里面加一个子节点，你就会发现不同了。子代只能选择父本的儿子，而不能选择儿子的儿子。但是后代选择器可以一起选上，相当于把儿子和孙子一起选了。
王小错
TA贡献16条经验 获得超11个赞
最简单的解释就是：
p span选择器控制的是p标签内所有的span标签，不过这个span被嵌套了多少层
而p>span控制的是该p标签下一层为span标签的标签，这个span不能被嵌套在其他标签里，必须是p的儿子
兼容并包
TA贡献83条经验 获得超67个赞
p span{} 这是后代选择器。HTML结构可以是这样子的
1
2
3
4
5
<p>这是
<span>一个
<span>很重要的提示：我也是P元素的后代</span>
</span>
</p>
p>span{} 这是子代元素。HTML结构可以是这样子的
1
2
3
4
<p>我的子代元素
<span>我是p元素的子代元素</span>
<span>我也是p元素的子代元素</span>
</p>
- 7 回答
- 0 关注
- 2347 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消