CSS 后代选择器和CSS 子元素选择器都属于派生选择器的范畴,它们是通过依据元素在其位置的上下文关系来定义样式,可以使标记更加简洁。
其中,CSS 后代选择器(descendant selector)又称为包含选择器,用于选择作为某元素后代的元素。代码中选择器"div a"指的是页面中<div>元素下的所有<a>元素,在没有给第二个<div>应用选择器"niubi"之前,页面上所有的<a>元素都应该显示棕色。如图:
没有给第二个div应用样式
CSS子元素选择器用于选择指定元素的第一代子元素。代码中".niubi>a"会选取设置了"class=niubi"样式的元素的直接子元素<a>,所以第一个<a>元素的颜色发生了变化。而<p>元素中包含的<a>并不是设置了"class=niubi"样式的<div>元素的直接子元素,所以颜色不会发生变化。如图:
第二个div应用样式niubi
后代选择器和子元素选择器的区别:
子元素选择器(child selector)通过“>”进行选择,仅是指它的直接后代(子元素的第一代后代),而后代选择器是通过空格来进行选择,作用于所有子后代元素。
css后代选择器和子选择器的区别介绍:1 css后代选择器
语法:h1 em {color:red} 表示的是从h1开始里面包含的所有的em元素变成红色,h1为祖先,其他的em都是后代,即选中后代,不管是儿子还是孙子,只要是都会被选中,为后代选择器。
2、css子元素选择器
语法:h1>em{color:red} 表示的是从h1开始里面的第一层em元素变成红色,h1为祖先,em为儿子,就像世袭制一样,只能传给儿子,孙子和其他堂亲都不行
子选择器还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码:
.food>li{border:1px solid red}
这行代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。
[html] view plain copy
<style type="text/css">
.food>li{border:1px solid red}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/
</style>
[html] view plain copy
<h1>食物</h1>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
包含(后代)选择器
包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码:
.first span{color:red}
这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。
请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。
总结:>作用于元素的第一代后代,空格作用于元素的所有后代。
举例:
.food li{
border:1px solid red/*添加边框样式(粗细为1px, 颜色为红色的实线)*/
}
[html] view plain copy
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>