jq基础-层次选择器

    <ul>
        <li>我是同学1
            <ol>
                <li>我是同学1的儿子1</li>
                <li>我是同学1的儿子2</li>
                <li>我是同学1的儿子3</li>
            </ol>
        </li>
        <li class="a">我是同学2</li>
        <li class="b" style="display: none;">我是同学3</li>
        <li>我是同学4</li>
        <li>我是同学5</li>
    </ul>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        /* 后代选择器 */
        /* 选取ancestor元素里的所有descendant（后代）元素 */
        $('ul li').css({background:'#e8f0f2',color:'#fff'})

        /* 选取parent元素下的child（子）元素 */
        // $('ul>li').css({border:'1px solid red',padding:'10px'})

        /* 相邻元素选择器 */
        /* 选取紧邻prev元素之后的next元素(不是一群 是一个) */
        // $('.a+li').css('background','#e8f0f2');

        /* 同辈元素选择器 */
        /* 选取prev元素之后的所有siblings元素(不是一个 是一群) */
        // $('.a~li').css('background','red');

        $('.a').click(function(){
            $('.b').css('display','block');
        })
    </script>
</body>