html - 内链接的自定义样式不起作用

Question

我被困在看似非常简单的事情上，但我一定遗漏了一些小细节。我有这个 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 等，似乎没有任何效果，知道为什么吗？

谢谢

Answer 1

我没有看到任何 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 */