【前端_层次选择器】子代选择器、后代选择器、兄弟选择器、相邻选择器

太过爱你忘了你带给我的痛 2024-04-06 13:41 80阅读 0赞

[CSDN话题挑战赛第2期][CSDN_2]  
参赛话题：[学习笔记][Link 1]

*学习之路，长路漫漫，写学习笔记的过程就是把知识讲给自己听的过程。这个过程中，我们去记录思考的过程，便于日后复习，梳理自己的思路。学习之乐，独乐乐，不如众乐乐，把知识讲给更多的人听，何乐而不为呢?  
你可以从以下几个方面着手（不强制），或者根据自己对话题主题的理解创作，参考如下：*

> **提醒：在发布作品前请把不用的内容删掉**

*  **子代选择器`>`**

> /\* 子选择器 \*/  
> body>p\{  
> background: red;  
> \}

<ul class="all">
            <li></li>
            <li>
                0.
                <ul>
                    <li>1.</li>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li></li>
        </ul>
        <script type="text/javascript">
        $(document).ready(
            function() {
          
                $("ul.all li").css("border","1px solid red");
            }
        );
        </script>

*  后代选择器

> /\* 后代选择器 \*/  
> body p \{  
> color:red;  
> \}

*  相邻兄弟选择器 /同辈

<p class="d1">大娃</p>
        <p class="c" id="d2">二娃</p>
        <span title="...">三娃</span>
        <p>呜哇</p>
    
        <div class="c">六娃</div>
    
        <h1 title="七娃">七娃</h1>
        <script type="text/javascript">
        $(document).ready(
            function() {
          
                $("p+.c").css("color","red");
            }
        );
        </script>

*  兄弟选择器

> p~ul \{  
> color:red；  
> \}

*  **相邻选择器 `+`**

> p+p\{  
> color:red；  
> \}

…

[CSDN_2]: https://marketing.csdn.net/p/7b6697fd9dd3795a268d1a6f2fe75012
[Link 1]: https://activity.csdn.net/creatActivity?id=10213