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

CSDN话题挑战赛第2期
参赛话题：学习笔记

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

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

• 子代选择器>

/* 子选择器 */
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；
}

…