如下写了一段代码
<!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");于是如下所示，修改成功
