鉴于 <a> 的属性已在 css 中定义，如何将 <a class="class"> 设置为默认属性答案

【问题标题】：How to set <a class="class"> to default property given <a>'s property already define in css鉴于 <a> 的属性已在 css 中定义，如何将 <a class="class"> 设置为默认属性
【发布时间】：2017-04-02 11:57:27
【问题描述】：

我的网页有很多没有类的<a>，它们的属性在css中设置如下：

a{
text-decoration:none;
color:black;
}

a:hover, a:active{
color:green;
}

现在我有了带有class="tnc" 的<a> 标记，我希望它具有默认属性，即带有下划线的蓝色文本，并且在激活时它会变为红色文本。

我试过了，但没用：

a.tnc{
color: initial;
text-decoration: initial;
}

a.tnc:hover, a.tnc:active{
color: initial;
}

感谢任何帮助。 :)

a:hover, a:active{
	color:green;
}

a.tnc{
	color: initial !important; 
	text-decoration: initial;
}

a.tnc:hover, a.tnc:active{
	color: initial;
}

I agree with the &lt;a class="tnc" href="#"&gt;terms and conditions&lt;/a&gt;

【问题讨论】：

请发布您的 HTML。

标签： html css hyperlink colors default

【解决方案1】：

initial 的值不是这样工作的。

初始值是每个 CSS 属性的定义值；不是每个 HTML 元素。

转到MDN for the color property：

初始值因浏览器而异

所以对于颜色属性：如果你想要一个统一的颜色 - 你不应该使用初始值。

所以要为 tnc 类获取正确的样式 - 只需使用必要的值重置属性：

a.tnc{
  color: blue;
  text-decoration: underline;
}

a.tnc:hover {
  color: red;
}

a{
text-decoration:none;
color:black;
}

a:hover, a:active{
color:green;
}

a.tnc{
color: blue;
text-decoration: underline;
}

a.tnc:hover{
color: red;
}

<a href="#">Default Anchor</a><br>
<a href="#" class="tnc">Anchor with class tnc</a><br>

【讨论】：

【解决方案2】：

试试这个：

a.tnc{
color: initial !important;
text-decoration: initial !important;
}

a.tnc:hover, a.tnc:active{
color: initial !important;
}

【讨论】：

可以发html吗
初始设置为黑色

【解决方案3】：

您可以使用not 选择器

a:not(.tnc) {
  text-decoration: none;
  color: black;
}

a:not(.tnc):hover,
a:not(.tnc):active {
  color: green;
}

<a href="#">Test</a><br>
<a href="#">Test</a><br>
<a href="#">Test</a><br>
<a href="#">Test</a><br>
<a href="#" class="tnc">Test</a><br>
<a href="#">Test</a><br>
<a href="#" class="tnc">Test</a>

【讨论】：