关于a标签默认颜色的改变（锋利的jQuery）

本文链接：https://blog.youkuaiyun.com/molu_chase/article/details/53140839

本文探讨了在CSS样式中a标签颜色优先级高于li颜色设置的问题，导致a标签内的文本颜色未按预期变为红色。通过解析代码示例，解释了解决这个问题的方法，即直接修改a标签的子元素样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如下写了一段代码

<!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");

于是如下所示，修改成功