html - 如何更改 HTML 中链接标签文本的颜色？

Question

.myActive{
	background:white;
	color: red;
}
.navbar > li > a:hover,
.navbar > li > a:focus{
	background: ;
	color: #333;
}

<ul class="navbar">
				<li> <a href="index.html">Home</a></li>
				<li> <a href="#">Categories</a></li>
				<li> <a href="#">About us</a></li>
				<li class="myActive"> <a href="#">Contact</a></li>
</ul>

我想更改 <a> 中文本的颜色标签，所以我写了一个改变 li 标签背景的类，但它没有改变我在 li 中的颜色文本。

经过一些研究，我明白我需要添加 <span>到我的文字。但我不明白为什么我需要这样做，<a>和 <span>是行内元素。

.navbar > li > a:hover,
.navbar > li > a:focus{
 background: white;
 color: #333;
}

为什么伪类焦点会起作用？

Answer 1

如果你想改变你的链接颜色:

.navbar > li > a{
  color: red;
}

不是

.navbar > li{
  color: red;
}

所以为链接元素而不是 li 添加 CSS。你不需要跨度。焦点有效是因为您为处于焦点状态的链接元素编写了 css。