一个样式选择一个特定的类

问题描述：

我试图找出如何写一个风格以下中同时指定悬停，主动：一个样式选择一个特定的类

我只想风格：悬停和：活跃锚.menu内的标签，而不是.menu-switch。以下似乎是工作，但无论如何，我可以加入他们的风格？

/*Apply the following styles to anchor tags within any ul within #main-nav*/ 
 
#main-nav ul li 
 
a:link, 
 
a:hover, 
 
a:active, 
 
a:visited { 
 
    color: #fff; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    display: block; 
 
    border-radius: 4px; 
 
} 
 
/*Apply the following styles to anchor tags within .menu only within #main-nav*/ 
 
#main-nav .menu a:active { 
 
    background-color: #ccc; 
 
} 
 

 
#main-nav .menu a:hover { 
 
    background-color: #ccc; 
 
}

<div id="main-nav"> 
 
    <ul class="menu-switch"> 
 
     <li><a class="js-menu-toggle" href="#">OPEN ME</a></li> 
 
    </ul> 
 
    <ul class="menu"> 
 
     <li><a href="#">Menu item 1</a></li> 
 
     <li><a href="#">Menu item 2</a></li> 
 
    </ul> 
 
</div>

答

您的代码实际上有一个其他问题：第一套的CSS规则没有被正确分类。您需要重复列表中每个选择器的#main-nav ul li部分;否则，规则将应用于文档中的其他链接，而不仅仅是#main-nav ul li中的链接。

同样，要将最后两条规则分组，您需要将其选择器整体分组。

此外，如果你不知道的话，你可能想follow the LoVe-HAte mnemonic in arranging your link pseudo-classes，除非你有一个很好的理由来排序:visited:hover和:active（后我也采取了安排你的最后两个选择时间相同的顺序）。

/*Apply the following styles to anchor tags within any ul within #main-nav*/ 
 
#main-nav ul li a:link, 
 
#main-nav ul li a:visited, 
 
#main-nav ul li a:hover, 
 
#main-nav ul li a:active { 
 
    color: #fff; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    display: block; 
 
    border-radius: 4px; 
 
} 
 
/*Apply the following styles to anchor tags within .menu only within #main-nav*/ 
 
#main-nav .menu a:hover, 
 
#main-nav .menu a:active { 
 
    background-color: #ccc; 
 
}

<div id="main-nav"> 
 
    <ul class="menu-switch"> 
 
     <li><a class="js-menu-toggle" href="#">OPEN ME</a></li> 
 
    </ul> 
 
    <ul class="menu"> 
 
     <li><a href="#">Menu item 1</a></li> 
 
     <li><a href="#">Menu item 2</a></li> 
 
    </ul> 
 
</div>

答

#main-nav ul li a:link, 
 
#main-nav ul li a:hover, 
 
#main-nav ul li a:active, 
 
#main-nav ul li a:visited { 
 
    color: #000; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    display: block; 
 
    border-radius: 4px; 
 
    border: 1px solid orange; 
 
} 
 
    /*Apply the following styles to anchor tags within .menu only within #main-nav*/ 
 
#main-nav ul a:active { 
 
    background-color: #ccc; 
 
    color: #fff; 
 
} 
 

 
#main-nav ul a:hover { 
 
    background-color: #ccc; 
 
    color: #fff; 
 
}

<div id="main-nav"> 
 
    <ul class="menu-switch"> 
 
    <li><a class="js-menu-toggle" href="#">OPEN ME</a></li> 
 
    </ul> 
 
    <ul class="menu"> 
 
    <li><a href="#">Menu item 1</a></li> 
 
    <li><a href="#">Menu item 2</a></li> 
 
    </ul> 
 
</div>

一个样式选择一个特定的类

相关推荐