对于span标签为什么子选择器和后代选择器效果一样呢-慕课网

首页课程实战体系课手记专栏慕课教程

对于span标签为什么子选择器和后代选择器效果一样呢

来源：8-7 这么快就当爷爷了? - 后代选择器

慕圣5475749

2017-08-31 20:19

下面两个为什么效果会一样呢？按照子选择器和后代选择器的区别，子选择器应该只对第一层标签有效果吧？那第一个例子中的“”如“”是不是就不应该有颜色呢？

.first》span{color:red;}

胆小如鼠

.first span{color:red;}

胆小如鼠

写回答关注

5回答

NAHSION: 2018-07-09 19:36:14

你别用color作比较啊，换个明显的属性就能对比出区别了，帮你做个对比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .a>span{
           color:red;
           border: 1px solid red ;
        }
        .b span{
            color:red;
            border: 1px solid red ;
        }
        .c>span{
            color:red;
            border: 1px solid red ;
        }
        .d span{
            color:red;
            border: 1px solid red ;
        }
    </style>
</head>
<body>
<p class="a">
    <!--子元素-->
 <span>胆小<span>如</span><!--孙元素-->鼠</span>
</p>
<p class="b">
    <!--子元素-->
 <span>胆小<span>如</span><!--孙元素-->鼠</span>
</p>
<p class="c">
    <span>胆小</span><!--子元素-->如<span>鼠</span><!--子元素-->
</p>
<p class="d">
    <span>胆小</span><!--子元素-->如<span>鼠</span><!--子元素-->
</p>
</body>
</html>

0 0

一只胡思乱想的猪

2017-09-07 17:51:52
第一个,子选择器中的直接后代即第一代后代包含了另一个
```
.first>span{color:red;}
胆小如鼠
```
你可以理解为(胆小如鼠),所以颜色会改变
0 0
慕粉3353420

2017-09-02 15:30:56

继承了父级span的color属性，

0 0
慕丝8119717

2017-08-31 21:18:03

刚才那个回答错了，>作用于第一个后代没问题，但是你的两个span标签，第一个子代就是最外层的span标签，如包含在里面，所以如也有颜色。也就是说你得这两个span标签，第一代包含了第二代！所以第二代也变色了

1 1

慕移动594...

刚看你说的挺有道理，但是后来一实验发现，是不对的，第一代包含了第二代，这不是一定的吗，不然怎么叫第二代呢，这个问题，我还是不懂

2018-03-13 09:24:24

共 1 条回复 >
慕丝8119717

2017-08-31 20:30:13

你添加第三个span标签试试看，也许会发现不同

0 0

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225810 学习 · 18234 问题

查看课程

相似问题

关于子选择器和后代选择器

回答 3

选择器和标签选择器是一样的么？

回答 5

子选择器和后代选择器

回答 5

类选择器和标签选择器

回答 3

关于子选择器和后代选择器疑问

回答 6

打开慕课网App查看更多内容