如何更改链接内 div 的背景颜色答案

【问题标题】：How can I change the background-color of a div inside a link如何更改链接内 div 的背景颜色
【发布时间】：2017-08-17 21:20:27
【问题描述】：

是否可以仅使用 :visited 伪类而不使用 Javascript 来更改链接内 div 的背景颜色？

<!DOCTYPE html>
<html>
    <head>
      <style>
            a:hover {background-color:blue;}
            a:visited {background-color:green;}

           .smallbox {
            background-color: #666;
            height: 50px;
            width: 50px;
           }
           .smallbox:hover {background-color:blue;}
           .smallbox:visited {background-color:green;}
      </style>
    </head>
    <body>
        <a href="#"><div class="smallbox"></div></a>
    </body>
</html>

【问题讨论】：

div 元素不应包含在 a 元素中。这不是一个有效的 html 结构。

标签： html css class visited

【解决方案1】：

是的，我相信你可以做到这一点。请记住，访问的伪类属于链接，而不是 div。

a:hover .smallbox {background-color:blue;}
a:visited .smallbox {background-color:green;}
a:visited .smallbox:hover {background-color:blue;}

 .smallbox {
  display: block;
  background-color: #666;
  height: 50px;
  width: 50px;
 }

&lt;a href="##"&gt;&lt;span class="smallbox"&gt;&lt;/span&gt;&lt;/a&gt;

正如 Dekel 在 cmets 中指出的，锚元素内的 div 是无效的 HTML。您可以作弊并在链接中放置一个跨度并将其显示属性设置为“阻止”，但这可能并不是更好。

如果您只需要一个行为类似于块元素而不是内联元素的链接，请考虑将锚标记的显示属性切换为 block 并按照本文中的建议完全删除内部元素：<div> within <a>

【讨论】：

【解决方案2】：

与其将它应用到一个 div 上，不如直接应用到“a”标签上，就像你做的那样，然后移除这个 div？你为什么需要它？ a: hover { background-color:blue; } 应该可以正常工作。您也只需将display:block 添加到a:hover 样式即可。

或者，如果您在页面上有多个 a 标记并且只想将其应用于其中一个，您可以使用 id 并将其应用于该标记：

<a id="someId" href="#">My Link</a>

CSS：

#someId {
    background-color: blue;
    display: block;
}

【讨论】：