怎样区分后代选择器和子代选择器

2025-10-19 20:17:11

1、第一从符号上来区分

后代选择器:是用空格来分隔开来 例如<h1>一个<span>人</span>的战争</h1> 就是h1 span{}

子代选择器:用特殊符号> 例如 h1>span{}

2、第二从用法上区分

后代选择器

html部分:

<ul class="study">  

    <li>物理 

        <ul>  

            <li>力学</li>  

            <li>声学</li>  

            <li>电磁学</li>  

        </ul>  

    </li>  

    <li>数学  

        <ul>  

            <li>微积分</li>  

            <li>概率论</li>  

            <li>博弈论</li>  

        </ul>  

    </li>  

</ul>  

css部分

//使用子代选择器的效果

.study >li{

    border:1px solid red;/*只给物理和数学加一个红色方框*/

}

//使用后代选择器的效果

.study  li{

    border:1px solid red;/*给物理 力学 声学 电磁学 和数学 微积分 概率论

博弈论都加一个红色方框*/

}

这说明子代是他是单传只给物理和数学就断子绝孙,后代是一代传一代。

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢