為什么更多沒有變顏色
<script src="jquery-3.1.1.min.js"></script>
<style type="text/css">
* {
? ? ? ? margin: 0;
? ? ? ? padding: 0;
? ? ? ? list-style: none;
? ? }
? ??
? ? body {
? ? ? ? font-size: 12px;
? ? }
? ??
? ? #menu {
? ? ? ? width: 360px;
? ? ? ? overflow: hidden;
? ? ? ? margin: 100px auto;
? ? ? ? border: 1px solid #BF9660;
? ? }
? ? #menu_con {
? ? ? ? width: 358px;
? ? ? ? height:200px;
? ? ? ? border-top: none
? ? }
? ? a{
? ? ? ? margin: 5px;
? ? }
</style>
</head>
<body>
<body>
<!--代碼部分begin-->
<div id="menu">
? ? <!--tag標題-->
? ? <div id="menu_female">
? ? ? ? <h3>女裝</h3>
? ? ? ? <div class="tag" style="display: block;">
? ? ? ? ? ? <dl>
? ? ? ? ? ? ? ? <dd>
? ? ? ? ? ? ? ? ? ? <p>第一類</p>
? ? ? ? ? ? ? ? ? ? <a>1.襯衫</a>
? ? ? ? ? ? ? ? ? ? <a>2.T恤</a>
? ? ? ? ? ? ? ? ? ? <a>3.雪紡衫</a>
? ? ? ? ? ? ? ? ? ? <a>4.針織衫</a>
? ? ? ? ? ? ? ? ? ? <a>5.短外套</a>
? ? ? ? ? ? ? ? ? ? <a>6.衛(wèi)衣</a>
? ? ? ? ? ? ? ? ? ? <a>7.小西褲</a>
? ? ? ? ? ? ? ? ? ? <a>8.風衣</a>
? ? ? ? ? ? ? ? ? ? <a>9.吊帶背心</a>
? ? ? ? ? ? ? ? ? ? <a>10.連衣裙</a>
? ? ? ? ? ? ? ? ? ? <a name="setColor">11.蕾絲連衣裙</a>
? ? ? ? ? ? ? ? ? ? <a>12.復古連衣裙</a>
? ? ? ? ? ? ? ? ? ? <a>13.印花連衣裙</a>
? ? ? ? ? ? ? ? ? ? <a>14.真絲連衣裙</a>
? ? ? ? ? ? ? ? ? ? <a>更多</a>
? ? ? ? ? ? ? ? </dd>
? ? ? ? ? ? </dl>
? ? ? ? </div>
? ? ? ? <div class="tag_More" style="display:block">
? ? ? ? ? ? <dl>
? ? ? ? ? ? ? ? <dd>
? ? ? ? ? ? ? ? ? ? <p>第二類</p>
? ? ? ? ? ? ? ? ? ? <a>1.背帶褲</a>
? ? ? ? ? ? ? ? ? ? <a>2.哈倫褲</a>
? ? ? ? ? ? ? ? ? ? <a>3.牛仔褲</a>
? ? ? ? ? ? ? ? ? ? <a>4.休閑褲</a>
? ? ? ? ? ? ? ? ? ? <a>5.小腳褲</a>
? ? ? ? ? ? ? ? ? ? <a>6.西裝褲</a>
? ? ? ? ? ? ? ? ? ? <a>7.打底褲</a>
? ? ? ? ? ? ? ? ? ? <a>8.闊腳褲</a>
? ? ? ? ? ? ? ? ? ? <a>9.短褲</a>
? ? ? ? ? ? ? ? ? ? <a>10.馬甲/背心</a>
? ? ? ? ? ? ? ? ? ? <a>11.羽絨服</a>
? ? ? ? ? ? ? ? ? ? <a>12.棉服</a>
? ? ? ? ? ? ? ? ? ? <a>13.夾克</a>
? ? ? ? ? ? ? ? ? ? <a>14.POLO衫</a>
? ? ? ? ? ? ? ? ? ? <a>更多</a>
? ? ? ? ? ? ? ? </dd>
? ? ? ? ? ? </dl>
? ? ? ? </div>>
? ? </div>
? ? <div id="menu_con">
? ? ? ? <h3>男裝</h3>
? ? ? ? <div class="tag" style="display:block">
? ? ? ? ? ? <dl>
? ? ? ? ? ? ? ? <dd>
? ? ? ? ? ? ? ? ? ? <p>第一類</p>
? ? ? ? ? ? ? ? ? ? <a>1.襯衫</a>
? ? ? ? ? ? ? ? ? ? <a>2.T恤</a>
? ? ? ? ? ? ? ? ? ? <a>3.牛仔褲</a>
? ? ? ? ? ? ? ? ? ? <a>4.休閑褲</a>
? ? ? ? ? ? ? ? ? ? <a>5.短褲</a>
? ? ? ? ? ? ? ? ? ? <a>6.針織衫</a>
? ? ? ? ? ? ? ? ? ? <a>7.西服</a>
? ? ? ? ? ? ? ? ? ? <a>8.西褲</a>
? ? ? ? ? ? ? ? ? ? <a>9.嘻哈褲</a>
? ? ? ? ? ? ? ? ? ? <a>10.西服套裝</a>
? ? ? ? ? ? ? ? ? ? <a>11.馬甲/背心</a>
? ? ? ? ? ? ? ? ? ? <a name="setColor">12.羽絨服</a>
? ? ? ? ? ? ? ? ? ? <a>13.棉服</a>
? ? ? ? ? ? ? ? ? ? <a>14.夾克</a>
? ? ? ? ? ? ? ? ? ? <p>更多</p>
? ? ? ? ? ? ? ? </dd>
? ? ? ? ? ? </dl>
? ? ? ? </div>
? ? ? ? <div class="tag_More" style="display:block">
? ? ? ? ? ? <dl>
? ? ? ? ? ? ? ? <dd>
? ? ? ? ? ? ? ? ? ? <p>第二類</p>
? ? ? ? ? ? ? ? ? ? <a>1.襯衫</a>
? ? ? ? ? ? ? ? ? ? <a>2.T恤</a>
? ? ? ? ? ? ? ? ? ? <a>3.牛仔褲</a>
? ? ? ? ? ? ? ? ? ? <a name='setColor'>4.休閑褲</a>
? ? ? ? ? ? ? ? ? ? <a>5.短褲</a>
? ? ? ? ? ? ? ? ? ? <a>6.針織衫</a>
? ? ? ? ? ? ? ? ? ? <a>7.西服</a>
? ? ? ? ? ? ? ? ? ? <a>8.西褲</a>
? ? ? ? ? ? ? ? ? ? <a>9.嘻哈褲</a>
? ? ? ? ? ? ? ? ? ? <a>10.西服套裝</a>
? ? ? ? ? ? ? ? ? ? <a>11.馬甲/背心</a>
? ? ? ? ? ? ? ? ? ? <a>12.羽絨服</a>
? ? ? ? ? ? ? ? ? ? <a>13.棉服</a>
? ? ? ? ? ? ? ? ? ? <a>14.夾克</a>
? ? ? ? ? ? ? ? ? ? <p>更多</p>
? ? ? ? ? ? ? ? </dd>
? ? ? ? ? ? </dl>
? ? ? ? </div>
? ? </div>
</div>
<script type="text/javascript">
? ? //找到男裝下第一類衣服中的第一個p元素，并改變顏色
? ? //可以通過子類選擇器 ?p:first-child 篩選出第一個p元素
? ? $("#menu_con div.tag dd > p:first-child").css('color','#9932CC');
</script>
<script type="text/javascript">
? ? //找到男裝下第一類衣服把a元素從順序1-4加上顏色
? ? //可以通過基本篩選器lt,選擇匹配集合中所有索引值小于給定index參數(shù)的元素
? ? //注意了index是從0開始計算，所以選在1-4,為對應的index就是4
? ?$("#menu_con > div:first dd:eq(0) > a:lt(4)").css('color','red');
</script>
<script type="text/javascript">
? ? //找到男裝所有a元素中屬性名name="setColor"的元素，并設置顏色
? ? //這里用的屬性選擇器[attribute='value']選擇指定屬性是給定值的元素
? ?$("#menu_con a[name='setColor']").css('color','blue');
</script>
<script type="text/javascript">
? ? //不分男女，選中第一類衣服中第9個a元素，并改變顏色
? ? //這里用了nth-child 選擇的他們所有父元素的第n個子元素
? ? $("#menu div.tag dd a:nth-child(10)").css('color','#66CD00');
</script>
<script type="text/javascript">
? ? //找到女裝下第一類衣服，把a元素中包含文字"更多"的節(jié)點，改變顏色
? ? $(".tag:first a:contains('更多')").css('color','#C71585');
</script>
</body>
</html>
2017-01-10
我這可以的呀。$(".tag:first a:contains(更多)").css('color','#C71585'); ? 女裝 第一類的更多變色了~~
1 ?:contains與:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
2 ?如果:contains匹配的文本包含在元素的子元素中，同樣認為是符合條件的.
2017-01-10
2017-01-07
把 ‘更多’的單引號去掉就可以了，具體原因參見 ：contains 詳細知識點~~