关于子选择器应用的问题

来源:9-3 权值计算-特殊性

SmileDL

2016-03-16 23:38

一个关于子选择器的问题
p span{color:purple;}
<p class="first">一二<span>三</span>四五六七八</p>
此时应该是3显示紫色
<p class="first">一二<span>三</span>四五<span>六</span>七八</p>
此时三、六均为紫色
>是子选择器、不是说标签下的第一个子元素变化吗?那为什么把p span{color:purple;}改为.first>span{color:purple;}后,六还是变成了紫色?

写回答 关注

5回答

  • 一湘
    2016-03-16 23:55:40
    已采纳

    <p class="first">一二<span>三</span>四五<span>六</span>七八</p>

    这一行的两个<span>标签属于并列子一代,都是第一代子元素,所以六还是紫色的。

    而<p class="first">一二<span>三<span>四五</span>六</span>七八</p> 这一行才只有一个子一代元素。

    总之:要理解为一代子元素,而不是第一个子元素,明白吗?

    SmileD...

    晓得了,是我理解错了,非常感谢

    2016-03-17 00:00:20

    共 1 条回复 >

  • 慕移动9181930
    2022-03-29 13:46:25

    这貌似是C语言的写法吧,和HTML没什么关系

    ywwagnbvbeayduqeffnigigdwgqduhgveruuwdfhcoxhmzwqgfobrwsyujudxob

  • 流浪世界
    2016-03-16 23:53:09

    这两个的span的关系并不是后代的关系,你可以理解为他是这两个span都是一个爸爸,并不是你理解的first是第一个span的爸爸,第二个span的爷爷,这两个span他们的关系是并列关系

    SmileD...

    明白了,谢谢哈~

    2016-03-17 00:01:37

    共 1 条回复 >

  • qq_loserandhisc_0
    2016-03-16 23:52:43

    同学可能你把第一个的意思理解错了。第一个在这里的意思是第一层,也就是说第一个指的是这个标签内部第一层次的所有标签,而不是顺序上的第一个。煮个栗子:父亲p下面有两个儿子span,这两个儿子就是同一个层次的。而像楼上这样写的话,就是一个儿子span和一个孙子span啦~

    SmileD...

    OK,谢谢前辈~

    2016-03-17 00:01:15

    共 1 条回复 >

  • 传说中传说
    2016-03-16 23:47:42

    .first>span是直接子元素吧,如果是下面这样应该就不行了,六就不是直接子元素了

    <p class="first">一二<span>三<span>六</span></span>四五七八</p>

    SmileD...

    OK了,谢谢谢谢哈!

    2016-03-17 00:00:54

    共 1 条回复 >

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

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

1225309 学习 · 18230 问题

查看课程

相似问题