Question

为什么下面的代码不起作用？

a:visited {
   background-color: yellow;
}

取自：http://www.w3schools.com/cssref/sel_visited.asp

我要做的是有两个链接指向两个不同的点，但覆盖同一个框。如果访问过任何一个链接，我希望以某种方式得到通知。更改背景颜色或边框颜色。

示例：

<a id="linkA" href="http://www.w3schools.com/">
  <a id="linkB" href ="http://www.w3schools.com/html/">
   <div id="bix">Change content if either link is visited</div>
 </a>
</a>

CSS：

#bix {
   border: 3px solid orange;
}

#linkA #bix {
   border: 3px solid green;
}

#linkB #bix {
  border: 3px solid red;
}

问题是当您检查代码时，＃LinkA不包含#LinkB。如何在#LinkA中使用#LinkB，或以任何其他方式使#bix对访问#LinkA或#LinkB作出反应。

Answer 1

尝试：

a:visited + #bix { ... }

您必须更改实际内容。

Answer 2

创建链接的正确方法是

<a href="http://www.example.com">This Will Be The Link</a>

然后，当访问它时，改变颜色的CSS将是

a:visited{
    color:blue;/*will change text colour*/
    background-color:yellow;/*will change background colour*/
}

这两个位置对我来说似乎是多余的，因为它只能到达一个位置？

Answer 3

HTML语法中禁止使用嵌套锚标记，因此它们没有显示出来。

正如@beautifulcoder建议的那样，更改内容本身。

a:visited > #bix { color: red; }

CSS访问链接更改背景颜色

3 个答案: