CSS文本颜色未更改

Question

我一直在尝试更改文本的颜色(Normal和Hover(，但似乎什么都不起作用。尝试重要但仍未显示。我试着寻找其他答案，但没有成功。CSS&HTML Div代码(我已经尝试删除文本装饰没有(

#five {
position    : fixed;
top         : 10px;
right       : 100px;
font-family : monospace;
font-weight : bold;
font-size   : 16px;
color       : red!;
}
#five:hover {
color       : black;
text-shadow : 5px 5px 5px red;
}

<p id="five">
<a href="UNKNOWN" target="_target" style="text-decoration: none;">
TEST5
</a>
</p>

Answer 1

您需要设置a标记的样式，而不是父标记。

#five a {
text-decoration: none;
color: red;
}
#five:hover a {
color: black;
}

这是因为默认情况下<a>标记应用自己的颜色(这在大多数情况下是一个好处，但在您的情况下，您必须使用a选择器直接手动更改颜色(。

完整、固定代码：

#five {
position: fixed;
top: 10px;
right: 100px;
font-family: monospace;
font-weight: bold;
font-size: 16px;
}
#five:hover {
text-shadow: 5px 5px 5px red;
}

/* this what I added */
#five a {
text-decoration: none;
color: red;
}
#five:hover a {
color: black;
}

<p id="five">
<a href="#" target="_target">TEST</a>
</p>

Answer 2

嗨，这是因为你需要给a标记上色，这样你就可以在a标记中添加一个类或id，然后更改它。

将css更改为：

.five {
position: fixed;
top: 10px;
right: 100px;
font-family: monospace;
font-weight: bold;
font-size: 16px;
color: red!;
}
.five:hover {
color: black;
text-shadow: 5px 5px 5px red;
}

并将html更改为：

<p id="five"><a class="five" href="UNKNOWN" target="_target" style="text-decoration: none;">TEST5</a></p>