如果 <a> 的 属性 已经在 css 中定义，如何将 <a class="class"> 设置为默认值 属性

Question

我的网页有很多 <a> 没有 class 并且它们的 属性 在 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 <a class="tnc" href="#">terms and conditions</a>

Answer 1

试试这个：

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

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

Answer 2

您可以使用 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>

Answer 3

值 initial 不是这样的。

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

转到MDN for the color property:

Initial value Varies from one browser to another

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

因此，要获得 tnc 的正确样式 class - 只需使用必要的值重置属性：

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>