0

我被困在一些看起来很简单的事情上，但我一定遗漏了一些小细节。我有这个 div：

<div id="menu" class="menu_div">
<a href="/">HOME</a> | 
<a href="/pics.php">PICTURES</a>
</div>

以及样式标签内的以下内容

.menu_div {
    background-color: #FFFFFF;
    border:1px solid black;
    width: 900px;
    a:link {color:#000000; text-decoration:none;}      /* unvisited link */
    a:visited {color:#000000; text-decoration:none;}  /* visited link */
    a:hover {color:#FF0000; text-decoration:none;}  /* mouse over link */
    a:active {color:#FF0000; text-decoration:none;}  /* selected link */
}

除链接外，一切正常。我尝试了其他组合，如 .menu_div a:hover 等，似乎没有任何效果，知道为什么吗？

谢谢

4

2 回答 2

4

我没有看到任何 SASS 或 LESS 标记，所以这是解决方案 - 您不能在 CSS 中使用嵌套规则。您必须单独定义它们：

.menu_div {
    background-color: #FFFFFF;
    border:1px solid black;
    width: 900px;
}

.menu_div a:link {color:#000000; text-decoration:none;}      /* unvisited link */
.menu_div a:visited {color:#000000; text-decoration:none;}   /* visited link */
.menu_div a:hover {color:#FF0000; text-decoration:none;}     /* mouse over link */
.menu_div a:active {color:#FF0000; text-decoration:none;}    /* selected link */
于 2012-12-12T16:16:15.913 回答
2

您不能在 CSS 中嵌套规则集。您必须使用后代组合器。

.menu_div {
    background-color: #FFFFFF;
    border:1px solid black;
    width: 900px;
}

.menu_div a:link {color:#000000; text-decoration:none;}      /* unvisited link */
.menu_div a:visited {color:#000000; text-decoration:none;}  /* visited link */
.menu_div a:hover {color:#FF0000; text-decoration:none;}  /* mouse over link */
.menu_div a:active {color:#FF0000; text-decoration:none;}  /* selected link */
于 2012-12-12T16:16:02.330 回答