SAGEGSDAGESE
2016-02-23 14:16
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩,上课从来不敢回答<span>老师</span>提出的问题</p>
.first>span{color:red;} 是不是这样写就只有"胆小如鼠"会变红,
.first span{color:red;} 而这样写"胆小如鼠"和"老师"都会变红?
不知道是浏览器的问题还是什么,无论怎样写我这两个词全显示红色啊,我的代码有问题吗?
你说的是对的,.first>span{color:red;} first的第一代span子元素为红色 也就是说 胆小如鼠,.first span{color:red;} 他的所有span子元素都会变成红色
第一代不是第一个,只要不是嵌套在第一代后代里的,都属于同一级后代。
“胆小如鼠”和“老师”都有span标签,.first>span{color:red;}就会显示红色字体
子选器
子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。
.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li加入红色实线边框。
包含(后代)选择器
包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。
.first span{color:red;}
请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。
总结:>作用于元素的第一代后代,空格作用于元素的所有后代。
你在其中一个span里边,找一个字或者2个字,在加上一个span,这个span用>就不会变色。这样理解直接后代就容易了,用 空格 一样全部红
你理解错误了,.first>span作用于元素的第一代后代,.first span作用于元素的所有后代。这里的.first>span只作用于“儿子”不作用于“孙子”,代码中“<span>胆小如鼠</span>”和“<span>老师</span>”属于同辈的兄弟关系,所以都会变红,只有当出现“<span>胆小<span>如鼠</span></span>”时,才会只有前面的“胆小”变红。
.first>span :表示class为first下第一代span,"胆小如鼠"和"老师"都是第一代span,所以都是红色:
.first>span :表示class为first下所有span,所以都是红色
目前这两种效果是一样的,因为两者都是p的直接子代。
初识HTML(5)+CSS(3)-升级版
1225817 学习 · 18234 问题
相似问题