關於a標籤預設顏色的改變（鋒利的jQuery）
阿新 • • 發佈：2019-01-08
如下寫了一段程式碼
顯示如下所示<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .promoted{ color:red; } </style> </head> <body> <ul> <li><a href="#">佳能</a><i>(30440)</i></li> <li><a href="#">索尼</a><i>(27220)</i></li> <li><a href="#">三星</a><i>(20808)</i></li> <li><a href="#">尼康</a><i>(17821)</i></li> <li><a href="#">松下</a><i>(12289)</i></li> <li><a href="#">卡西歐</a><i>(8248)</i></li> <li><a href="#">富士</a><i>(14894)</i></li> <li><a href="#">柯達</a><i>(9520)</i></li> <li><a href="#">賓得</a><i>(2195)</i></li> <li><a href="#">理光</a><i>(4114)</i></li> <li><a href="#">奧林巴斯</a><i>(12205)</i></li> <li><a href="#">明基</a><i>(1466)</i></li> <li><a href="#">愛國者</a><i>(3091)</i></li> <li><a href="#">其他</a><i>(7275)</i></li> </ul> <div class="showmore"> <a href="#"><span>顯示全部品牌</span></a> </div> <script src="lib/jquery-2.1.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ var $category=$('ul li:gt(5):not(:last)');//index大於5的且不是最後一個li $category.hide();//將其隱藏 var $toggleBtn=$('div.showmore>a');//獲取a標籤 $toggleBtn.click(function(){ $category.show(); $(this).find('span') .text("精簡顯示品牌");//當點選事件發生時，改變span的text $('ul li').filter(":contains('佳能'),:contains('理光')") .addClass("promoted");//選取佳能和理光，併為其新增類 return false; }) }) </script> </body> </html>
然後點選顯示全部品牌，如下
我上面的程式碼是將li都變成紅色，但是a標籤下的文字並沒有變成紅色，
網上搜的如下解釋：
應該是你在css中定義了a標籤的預設顏色 給li的color設定的值被a預設值覆蓋了 （a標籤顏色的優先順序較高）
於是我獲取其子元素直接修改，上面的程式碼只用修改一行，如下
$('ul li').filter(":contains('佳能'),:contains('理光')")
.addClass("promoted").find('a').css("color","red");