使用css中的类更改链接的颜色

Question

我正在尝试使用css中的类将链接的颜色更改为绿色，但由于某种原因它无法正常工作。我做错了什么？

a:link {
color: red;
}
.colorGreen a:link {
color: green;
}

<a href = 'www.link.com'> www.link.com </a> <br>
<a href = 'www.link.com'> www.link.com </a> <br>
<a class = 'colorGreen' href = 'www.link.com'> www.link.com </a>

Answer 1

您正在选择包含父类a tags的子级colorGreen。它应该是：

a.colorGreen:link {
   color: green;
}

现在，您已选择a tag类colorGreen。

Answer 2

是在

时使用的

  .classname a:link{
    }

元素是

<div class="classname">
<a ></a>
</div>

a:link {
color: red;
}
.colorGreen:link {
color: green;
}

.colorBlue a:link {
color: Blue;
}

<a href = 'www.link.com'> www.link.com </a> <br>
<a href = 'www.link.com'> www.link.com </a> <br>
<a class = 'colorGreen' href = 'www.link.com'> www.link.com </a>


<div class="colorBlue">  
  <a href = 'www.blue.com'> www.link.com </a>
 </div>

Answer 3

您可以使用多种方式应用此功能。使用!important

a:link {
color: red;
}
.colorGreen {
color: green !important;
}

<a href = 'www.link.com'> www.link.com </a> <br>
<a href = 'www.link.com'> www.link.com </a> <br>
<a class = 'colorGreen' href = 'www.link.com'> www.link.com </a>

 或者这样。

 a:link {
    color: red;
}
.colorGreen:link {
    color: green;
}

   


    <a href = 'www.link.com'> www.link.com </a> <br>
    <a href = 'www.link.com'> www.link.com </a> <br>
    <a class = 'colorGreen' href = 'www.link.com'> www.link.com </a>