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

Question

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

a{
text-decoration:none;
color:black;
}
a:hover, a:active{
color:green;
}

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

我试过这个但没有工作：

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

值initial不是那样工作的。

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

转到 MDN 以获取颜色属性：

初始值 因浏览器而异

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

因此，要获得 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>

Answer 2

试试这个：

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

Answer 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>