Question

我很难理解如何在CSS中完成这个简单的任务。

以下是基本的HTML代码：

<div class="menu">
 <div class="menuItem uno"><a href="/one.php">1<span>One</span></a></div>
 <div class="menuItem dos"><a href="/two.php">2<span>Two</span></a></div>
</div>

我正在尝试更改a:（超链接）的css格式，但只有当它们位于此menu类内时才会这样：

a {
    color: #000000;
    text-decoration: none;
}

被绕过。

我的css文件中有.menu：

.menu {
  position: fixed;
  padding-top: 15px;
  etc...
}

然后我有

.menu a:active, a:hover, a:link, a:visited {
    outline: 0;
    color: #fff;
    text-decoration: none;
}

这对我的menu类内部的链接没有任何作用，但它会影响此menu div之外的超链接。我的格式错误是什么？

Answer 1

你想说：

.menu a:active, .menu a:hover, .menu a:link, .menu a:visited {
    outline: 0;
    color: #fff;
    text-decoration: none;
}

逗号分隔列表中的每个选择器都独立存在; .menu不会适用于该行中的所有内容。

Answer 2

您需要每次都指定整个选择器。

.menu a:active,
.menu a:hover,
.menu a:link,
.menu a:visited {
    outline: 0;
    color: #fff;
    text-decoration: none;
}

如果您使用的是CSS预处理器，例如LESS，则可以嵌套选择器：

.menu {
    a:hover,
    a:link,
    a:active,
    a:visited {
        outline: 0;
        color: #fff;
        text-decoration: none;
    }
}

Answer 3

您必须在底部CSS中的每个锚点选择器前添加.menu，您现在使用的选择器现在仅在菜单中定位active锚标记，但它定位于{{页面中的任何位置都有1}}，hover和link个，因为您没有提供相同的特异性：

visited

css：仅当链接位于特定类中时才对链接执行特定操作

3 个答案: