如何设置<a class="class"> to default property given </a> <a>&#39;s property already define in css

Question

My web pages have a lot of <a> without class and their property were set in css as below:

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

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

And now I have <a> tags that with class="tnc" and I want it to have the default property which is blue color text with underline and when active it change to red color text.

I tried this but not work:

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

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

Any help is appreciated. :)

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：

  

初始值从一个浏览器变为另一个浏览器

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

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

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

a.tnc:hover {
  color: red;
}

＆＃13;

＆＃13;

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

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

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

a.tnc:hover{
color: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个：

log

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>