如何更改 link 中 div 的背景颜色

Question

是否可以仅使用 :visited 伪 class 而不使用 Javascript 来更改 link 中 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>

Answer 1

是的，我相信你能做到。请记住，访问的伪 class 属于 link，而不是 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;
 }

<a href="##"><span class="smallbox"></span></a>

正如 Dekel 在评论中指出的那样，锚元素内的 div 是无效的 HTML。您可以欺骗并在 link 内放置一个跨度，并将其显示属性设置为 "block"，但这可能并不是更好。

如果您只需要一个表现得像块元素而不是内联元素的 link，请考虑将锚标记的显示属性切换为 block 并完全删除内部元素正如此 post 中所建议的：<div> within <a>

Answer 2

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

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

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

CSS:

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

如何更改 link 中 div 的背景颜色

How can I change the background-color of a div inside a link

html

css

class

visited