【前端_层次选择器】子代选择器、后代选择器、兄弟选择器、相邻选择器-蒲公英云

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

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;
}

相邻兄弟选择器 /同辈

大娃

二娃

三娃

呜哇

<div class="c">六娃</div>
<h1 title="七娃">七娃</h1>
<script type="text/javascript">
$(document).ready(
    function() {
        $("p+.c").css("color","red");
    }
);
</script>