CSS 访问过的链接改变背景颜色答案

【问题标题】：CSS visited links change background colorCSS 访问过的链接改变背景颜色
【发布时间】：2014-08-30 05:28:27
【问题描述】：

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

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 的访问做出反应。

【问题讨论】：

您不能将 LinkB 置于 LinkA 的“内部”，因为 HTML <a> 只允许包含 Inline elements except <a> — 也就是说，LinkA 不允许（按规范）包含 div 或另一个<a>。当您以这种方式编写它时，浏览器将重新解释它以构建一个有效的 DOM 树......可能就像<a id="linkA"> ... </a> <a id="linkB"> ... </a> <div id="bix"> ... </div> 一样都是兄弟姐妹。
@StephenP 是的，这就是我注意到的。我不知道为什么。所以我想很多链接下没有办法有子链接。
Why doesn't this a:visited css style work?的可能重复

标签： css html

【解决方案1】：

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

按照@beautifulcoder 的建议，更改内容本身。

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

【讨论】：

这就是问题所在，嵌套标签。我想没有办法解决这个问题，我将不得不找出另一种方法。

【解决方案2】：

试试：

a:visited + #bix { ... }

您必须更改实际内容。

【讨论】：

【解决方案3】：

创建链接的正确方法是

<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*/
}

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

【讨论】：

页面上会有其他链接指向这些位置。