CSS ⼦类选择器和后代选择器的区别
⼀.介绍
1.⼦类选择器
⼦类选择器仅仅指的是⽗元素的直接后代，⼤家可以理解为仅作⽤于第⼀代⼦元素，通过“>”进⾏选择。
2.后代选择器
后代选择器则指的是作⽤于所有后代元素，通过空格来进⾏选择。
话不多说，接下来通过代码给⼤家演⽰。
⼆.举例
这是没有任何样式的，我们在浏览器中显⽰如下： 接下来我们使⽤⼦类选择器”.clothes>li”表⽰给class为clothes的⼦类li(第⼀代⼦类)添加⼀个红⾊边框。
<ul  class ="clothes">
<li >⾐服
<ul >
<li >T 恤</li >
<li >衬⾐</li >
<li >短袖</li >
</ul >
</li >
<br >
<li >裤⼦
<ul >
<li >⽜仔裤</li >
<li >休闲裤</li >
<li >七分裤</li >
</ul >
css选择器分为哪几类</li >
</ul >
<script >
$(function  () {
$(".clothes>li").css("border","1px solid red");
});
</script >
浏览器显⽰效果如下图所⽰：
我们可以看到只有第⼀代⼦类为li（⾐服、裤⼦）的加上了红⾊边框，⽽其他的如T恤、⽜仔裤等等并没有任何样式。接下来我们换⽤后代选择器”.clothes li”表⽰给class为clothes所有后代为li的⼦类添加⼀个红⾊边框。
浏览器显⽰效果如下图所⽰：
我们可以看到所有后代为li的元素都加上了红⾊边框，不仅仅是第⼀代⼦元素了。
三.总结总结：>作⽤于元素的第⼀代后代，空格作⽤于元素的所有后代。    <script >
$(function  () {
$(".clothes li").css("border","1px solid red");
});
</script >

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。