问答详情
源自：8-7 这么快就当爷爷了? - 后代选择器

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

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

1

.first》span{color:red;}

<span>胆小<span>如</span>鼠</span>

2

.first span{color:red;}

<span>胆小<span>如</span>鼠</span>


提问者：慕圣5475749 2017-08-31 20:19

个回答

  • 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>

    https://img.mukewang.com/5b43484a000143ba01060181.jpg

    0
  • 一只胡思乱想的猪
    2017-09-07 17:51:52

    第一个,子选择器中的直接后代即第一代后代<span>包含了另一个<span>

    .first>span{color:red;}
<span>胆小<span>如</span>鼠</span>

    你可以理解为<span>(胆小<span>如</span>鼠)</span>,所以颜色会改变

    0
  • 慕粉3353420
    2017-09-02 15:30:56

    继承了父级span的color属性，

    0
  • 慕丝8119717
    2017-08-31 21:18:03

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

    1
  • 慕丝8119717
    2017-08-31 20:30:13

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

    0