CSS不仅将HREF参数放在整个DIV上

Question

我试图使用CSS将整个DIV放置在HREF参数中，但是当我想为链接提供颜色时，它不起作用。

.nav_link a {color:#c2c2c2;text-decoration:none;}
.nav_link a:visited {color:#c2c2c2;}
.nav_link a:hover {color:#b1b1b1;}

<a class="nav_link" href="#"><div class="nav_home">Link 1</div></a>
<a class="nav_link" href="#"><div class="nav">Link 2</div></a>
<a class="nav_link" href="#"><div class="nav">Link 3</div></a>
<a class="nav_link" href="#"><div class="nav">Link 4</div></a>

Answer 1

从.nav_link A删除标签：

.nav_link {
  color:#c2c2c2;
  text-decoration:none;
}
.nav_link:visited {
  color:#c2c2c2;
}
.nav_link:hover {
  color:#b1b1b1;
}

<a class="nav_link" href="#"><div class="nav_home">Link 1</div></a>
    <a class="nav_link" href="#"><div class="nav">Link 2</div></a>
    <a class="nav_link" href="#"><div class="nav">Link 3</div></a>
    <a class="nav_link" href="#"><div class="nav">Link 4</div></a>

Answer 2

您的CSS选择器错误。a具有nav_link类，因此.nav_link a实际上无目标。您可以执行a.nav_link或仅.nav_link。

Answer 3

如果您希望悬停影响其他元素的CSS，则需要这样的东西：

a:visited > .nav{color:#c2c2c2;text-decoration:none;}

ie-访问a时，更改其中的.nav元素的颜色。

Answer 4

以下是更新的代码

.nav_link {
  color:#c2c2c2;
  text-decoration:none;
}
.nav_link:visited {
  color:#c2c2c2;
}
.nav_link:hover {
  color:#b1b1b1;
}

<a class="nav_link" href="#"><div class="nav_home">Link 1</div></a>
    <a class="nav_link" href="#"><div class="nav">Link 2</div></a>
    <a class="nav_link" href="#"><div class="nav">Link 3</div></a>
    <a class="nav_link" href="#"><div class="nav">Link 4</div></a>