子元素篩選選擇器

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>子元素篩選選擇器</h2>
    <h3>:first-child、:last-child、:only-child</h3>
    <div class="left first-div">
        <div class="div">
            <a>:first-child</a>
            <a>第二個(gè)元素</a>
            <a>:last-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二個(gè)元素</a>
            <a>:last-child</a>
        </div>
    </div>

    <script type="text/javascript">
        //查找class="first-div"下的第一個(gè)a元素
        //針對所有父級下的第一個(gè)
        $('.first-div a:first-child').css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
        //查找class="first-div"下的最后一個(gè)a元素
        //針對所有父級下的最后一個(gè)
        //如果只有一個(gè)元素的話，last也是第一個(gè)元素
        $('.first-div a:last-child').css("color", "red");
    </script>

    <script type="text/javascript">
        //查找class="first-div"下的只有一個(gè)子元素的a元素
        $('.first-div a:only-child').css("color", "blue");
    </script>


    <h3>:nth-child、:nth-last-child</h3>
    <div class="left last-div">
        <div class="div">
            <a>:first-child</a>
            <a>第二個(gè)元素</a>
            <a>第三個(gè)元素</a>
            <a>:last-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二個(gè)元素</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二個(gè)元素</a>
            <a>第三個(gè)元素</a>
            <a>:last-child</a>
        </div>
    </div>

    <script type="text/javascript">
        //查找class="last-div"下的第二個(gè)a元素
        $('.last-div a:nth-child(2)').css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
        //查找class="last-div"下的倒數(shù)第二個(gè)a元素
        $('.last-div a:nth-last-child(2)').css("color", "red");
    </script>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容