如何更改链接中的div的背景颜色

问题描述：

是否可以使用只有一个：visited伪类而不使用Javascript更改链接中的div的背景颜色？如何更改链接中的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结构。 – Dekel

答

是的，我相信你可以做到这一点。请记住访问过的伪类属于链接，而不是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>

正如评论所指出的德克尔，锚元素内一个div是无效的HTML。你可以欺骗并在链接中放置一个跨度，并将其显示属性设置为“阻止”，但这可能不是更好。

如果你只需要表现得像块元素，而不是一个内联元素的链接，考虑锚标记的显示属性切换到block并彻底消除了内部元件在这篇文章建议：<div> within <a>

如何更改链接中的div的背景颜色

相关推荐