怎么区分CSS的子代和后代选择器

html-css058

怎么区分CSS的子代和后代选择器,第1张

子选择器

还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：

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

是的，子代选择器只修饰子代的元素，对后代的元素不一定生效

例如：

<div class="box">

<div>子代1</div>

<div>

<ul>

<li>01</li>

<li>01</li>

<li>01</li>

<li>01</li>

<li>01</li>

</ul>

<div>ssss</div>

</div>

在这里，

.box>div{

样式

}

只对box的两个子级 div生效，而子级里面的 div 则不生效(除了子级能够继承的样式之外)

如果是 .box div{

样式

}

使用后代选择器，则所有的 box 的后代 div 都会生效