html - HTML double links

Question

I have 2 sets of links on my html page, one for the top and bottom of the page, and one for different pages. But I want to change the second one. After I put this code

a:link {
color: green;
background-color: transparent;
text-decoration: none;
        }
       a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
       }
         a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
          }
      a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
  }`

everything on my page becomes those colors. What can I do to change this?

标签： html

Answer 1

使用classlinks 容器的属性来定义其中的链接的特殊样式。例如：

/* General link style */
a {
  color: #0000FF;
}

/* Style for a link inside .special container */
.special a {
  color: #00FF00;
}

<div>
  <a href="#">Link A</a>
</div>
<div class="special">
  <a href="#">Link B</a>
</div>
<div>
  <a href="#">Link C</a>
</div>