                        課程
                    
                        /前端開發
                        
                            /jQuery
                        
                        /jQuery基礎 (一)—樣式篇

為什么明明寫的是按代碼輸的，結果兩行字體顏色都變了

<!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/:last/:even/:odd</h3>
??? <div class="left">
??????? <div class="div">
??????????? <p>div:first</p>
??????????? <p>:even</p>
??????? </div>
??????? <div class="div">
??????????? <p>:odd</p>
??????? </div>
??????? <div class="div">
??????????? <p>:even</p>
??????? </div>
??????? <div class="div">
??????????? <p>:odd</p>
??????? </div>
??????? <div class="div">
??????????? <p>:even</p>
??????? </div>
??????? <div class="div">
??????????? <p>div:last</p>
??????????? <p>:odd</p>
??????? </div>
??? </div>
??? <script type="text/javascript">
??? //找到第一個div
?? $(".div:first").css("color", "#CD00CD");
??? </script>
?? ?
??? <script type="text/javascript">
??? //找到最后一個div
??? $(".div:last").css("color", "#CD00CD");
??? </script>
?? ?
??? <script type="text/javascript">
??? //:even 選擇所引值為偶數的元素，從 0 開始計數
??? ?.css("border", "3px groove red");
??? </script>
?? ?
??? <script type="text/javascript">
??? //:odd 選擇所引值為奇數的元素，從 0 開始計數
??? ?.css("border", "3px groove blue");
??? </script>
?? ?
?? ?
??? <h3>:eq/:gt/:lt</h3>
??? <div class="left">
??????? <div class="aaron">
??????????? <p>:lt(3)</p>
??????? </div>
??????? <div class="aaron">
??????????? <p>:lt(3)</p>
??????? </div>
??????? <div class="aaron">
??????????? <p>:eq(2)</p>
??????? </div>
??????? <div class="aaron">
??????? </div>
??????? <div class="aaron">
??????????? <p>:gt(3)</p>
??????? </div>
??????? <div class="aaron">
??????????? <p>:gt(3)</p>
??????? </div>
??? </div>
??? <script type="text/javascript">
??? //:eq
??? //選擇單個
??? ?.css("border", "3px groove blue");
??? </script>
?? ?
??? <script type="text/javascript">
??? //:gt 選擇匹配集合中所有索引值大于給定index參數的元素
??? ?.css("border", "3px groove blue");
??? </script>
?? ?
???? <script type="text/javascript">
??? //:lt 選擇匹配集合中所有索引值小于給定index參數的元素
??? //與:gt相反
??? ?.css("color", "#CD00CD");
??? </script>
?? ?
??? <h3>:not</h3>
??? <div class="left">
??????? <div>
??????????? <input type="checkbox" name="a" />
??????????? <p>Aaron</p>
??????? </div>
??????? <div>
??????????? <input type="checkbox" name="b" />
??????????? <p>慕課</p>
??????? </div>
??????? <div>
??????????? <input type="checkbox" name="c" checked="checked" />
??????????? <p>其他</p>
??????? </div>
??? </div>
??? <script type="text/javascript">
??????? //:not 選擇所有元素去除不匹配給定的選擇器的元素
??????? //選中所有緊接著沒有checked屬性的input元素后的p元素，賦予顏色
??????? ?.css("background-color", "#CD00CD");
??? </script>
</body>

</html>

qq_隨風飄_1

2017-02-08

源自：jQuery基礎 (一)—樣式篇 2-7

關注問題我要回答

998

操作

收起

2 回答

heavenScript 回答被采納 +3 積分
2017-02-09

這就是正確的顯示效果呀，看你的代碼：

???//找到第一個div
???$(".div:first").css("color",?"#CD00CD");
????</script>
????
????<script?type="text/javascript">
????//找到最后一個div
????$(".div:last").css("color",?"#CD00CD");
????</script>

第一個和最后一個div都被獲取到了，然后把color改成了#CD00CD

你可以試試吧顏色換成別的，這樣就會更清楚哪一個選擇器變的什么顏色