html - 无法更改当前链接颜色和背景

Question

我创建了一个简单的示例。我想更改链接的当前颜色。这是代码:

<div id="link1">
    some content
</div>
<div id="link2">
    some content
</div>

 <div class="div1">             
    <div id="navigation">
        <ul>
          <li><a data-tab="#link1" id="link-link1"href="#link1">Link1</a></li>
          <li><a data-tab="#link2" id="link-link2"href="#link2">Link2</a></li>
        </ul>
    </div>   
 </div>  

更改当前链接颜色的 CSS 代码:

#link1:target ~ .div1 #navigation #link-link1,
#link2:target ~ .div1 #navigation #link-link2
{
    background: #000;
    color: #fff;
}

这可行，但我需要在之前定义链接

<div id="link1">
    some content
</div>
<div id="link2">
    some content
</div>

在它不改变链接的当前颜色之后，我尝试了 .div1 #navigation #link-link1 ~ #link1:target 和 .div1 #navigation #link-link1 #link1:target。

还是不行。

Answer 1

请记住，链接具有非常具体的 CSS 代码 (a:link a:visited: a:active a:hover)，您只需更改类即可。如果您想要各种链接的不同样式，请尝试使用此代码

.class1 A:link {put styles here} 
.class1 A:visited {put styles here} 
.class1 A:active {put styles here}
.class1 A:hover {put styles here}

.class2 A:link {put styles here} 
.class2 A:visited {put styles here} 
.class2 A:active {put styles here} 
.class2 A:hover {put styles here}

等等。对于 html 部分，只需使用

text

祝你好运:)