css:仅当链接在特定类中时才对链接执行特定操作

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;
}

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

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