html - 如何将 <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 for the color property :

Initial value Varies from one browser to another

所以对于颜色属性:如果你想要一个统一的颜色 - 你不应该使用值 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>