zoukankan      html  css  js  c++  java
  • [ jquery 位置选择器 :first-child :last-child ] 强化说明:选取属于其父元素和所有兄弟元素中子元素集合中处于第一个(最后一个)位置上符合条件的元素

     强化说明:选取属于其父元素所有兄弟元素子元素集合中处于第一个(最后一个)位置上符合条件的元素

    注意和:first :last 的区别

    实例:

    <!DOCTYPE html>
    <html lang='zh-cn'>
    <head>
    <title>Insert you title</title>
    <meta http-equiv='description' content='this is my page'>
    <meta http-equiv='keywords' content='keyword1,keyword2,keyword3'>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>
    <style type="text/css" >
        *{margin:0;padding:0;}
        html{font:400 15px/1.2em '仿宋';color:#000;}
        #demo{850px;height:450px;margin:75px auto;}
        p{white-space: pre-wrap;}
        .div-second{border:1px solid #921;margin:10px 0;padding:0;}
        div > *{margin:5px 0;cursor:pointer;}
    </style>
    <script type='text/javascript'>
       
        $(function(){
            
            /**
                定义和用法
                  :first-child 选择器选取属于其父元素和所有兄弟元素中子元素集合中的第一个符合的元素
                提示:
                    请使用 :last-child 选择器选取属于其父元素和所有兄弟元素中子元素集合中的最后一个符合的元素
                声明:
                    请使用这个选择器来选择多个符合的元素
            */
            $('.div-second p:first-child').css({'backgroundColor':'#F33942',});
            $('.div-second p:last-child').css({'backgroundColor':'#C39A6B',});
        });
    </script>
    </head>
    <body>
        <div id='demo'>
            <p>这是一段包含在 p 标签的测试文本</p>
            <div class='div-second'>
                <p>这是一段包含在 div-first > p 标签的测试文本</p>
                <p>这是一段包含在 div-first > p 标签的测试文本</p>
            </div>
            <div class='div-second'>
                <p>这是一段包含在 div-second > p 标签的测试文本</p>
                <div id='sub'>
                    <p>这是一段包含在 div-sub > p 标签的测试文本</p>
                </div>
                <span>这是一段包含在 div-second > span 标签的测试文本</span>
                <p>这是一段包含在 div-second > p 标签的测试文本</p>
                <span>这是一段包含在 div-second > span 标签的测试文本</span>
            </div>
            <div class='div-second'>
                <p>这是一段包含在 div-second > p 标签的测试文本</p>
                <p>这是一段包含在 div-second > p 标签的测试文本</p>
            </div>
        </div>
    </body>
    </html>
  • 相关阅读:
    CentOS安装系统时硬盘分区建议
    Linux下的gpt分区
    如何解决Win10账户没有了管理员权限
    redis数据的清空以及回滚
    禅道的作用以及安装
    Java数组的内存图
    Java中的内存划分
    进制
    Java数组
    Java方法的重载(Overload)
  • 原文地址:https://www.cnblogs.com/mysearchblog/p/5613429.html
Copyright © 2011-2022 走看看