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 */

Answer 2

您无法在CSS中嵌套规则集。您必须使用descendant combinators。

.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 */

<div>无法正常工作的链接的自定义样式</div>

2 个答案: