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> 

我试图改变CSS格式的a:（超链接），但只有当他们是这个menu类的内部，使得这样的：

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

被绕过。

我有一个.menu在我的CSS文件：

.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股利。我在格式中做错了什么？

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

Answer 2

你想说：

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

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

Answer 3

您必须添加.menu在每个锚选择的前底部CSS，选择你'现在只使用菜单中的active定位标记，但它将目标定位在页面内任何地方的hover,link和，因为您没有提供相同的特征：

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