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;}后,六还是变成了紫色?
<p class="first">一二<span>三</span>四五<span>六</span>七八</p>
这一行的两个<span>标签属于并列子一代,都是第一代子元素,所以六还是紫色的。
而<p class="first">一二<span>三<span>四五</span>六</span>七八</p> 这一行才只有一个子一代元素。
总之:要理解为一代子元素,而不是第一个子元素,明白吗?
这两个的span的关系并不是后代的关系,你可以理解为他是这两个span都是一个爸爸,并不是你理解的first是第一个span的爸爸,第二个span的爷爷,这两个span他们的关系是并列关系
同学可能你把第一个的意思理解错了。第一个在这里的意思是第一层,也就是说第一个指的是这个标签内部第一层次的所有标签,而不是顺序上的第一个。煮个栗子:父亲p下面有两个儿子span,这两个儿子就是同一个层次的。而像楼上这样写的话,就是一个儿子span和一个孙子span啦~
.first>span是直接子元素吧,如果是下面这样应该就不行了,六就不是直接子元素了
<p class="first">一二<span>三<span>六</span></span>四五七八</p>
初识HTML(5)+CSS(3)-升级版
1225309 学习 · 18230 问题
相似问题