jQ选择器（子元素后代元素兄弟元素相邻元素）

最新推荐文章于 2024-01-14 11:54:30 发布

原创最新推荐文章于 2024-01-14 11:54:30 发布 · 6.9k 阅读

3 ·

CC 4.0 BY-SA版权

本文深入讲解了CSS中各种选择器的使用方法，包括子选择器、后代选择器、相邻选择器及相邻兄弟选择器，通过具体示例展示了如何精确地定位页面元素。

<script type="text/javascript">
 //子选择器
        //$('div > p') 选择所有div元素里面的子元素P
        $('div > p').css("border", "1px groove red");
    </script>

    <script type="text/javascript">
 //后代选择器
        //$('div  p') 选择所有div元素里面的p元素
        $('div  p').css("border", "1px groove red");
    </script>
 //一般相邻选择器
        //选取prev后面的所有的div兄弟节点
         $(".prev ~ div").css("border", "3px groove blue");

//相邻兄弟选择器
        //选取prev后面的第一个的div兄弟节点
         $(".prev + div").css("border", "3px groove blue");