class問題
<!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="https://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元素
? ? ? ? //針對(duì)所有父級(jí)下的第一個(gè)
? ? ? ? $('.first-div a:first-child').css("color", "#CD00CD");
? ? </script>
? ? <script type="text/javascript">
? ? ? ? //查找class="first-div"下的最后一個(gè)a元素
? ? ? ? //針對(duì)所有父級(jí)下的最后一個(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>
上面代碼中加粗的? ?class不是等于"left first-div"嘛? ?和下面加粗的代碼不應(yīng)該寫成$(".left first-div ....")嗎？
2018-09-10
left和first-div 是兩個(gè)樣式? ?他后面的只是要查找class="first-div"下的第一個(gè)a元素