我正在尝试找出如何为以下内容编写样式：
我只想为 .menu 内的锚标记设置 a:hover 和 a:active 样式，而不是 .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.
同样，要对最后两条规则进行分组，您需要对它们的选择器进行整体分组。
另外，如果您没有意识到这一点，您可能想要遵循 LoVe-HAte 助记符来排列链接伪类，除非你有充分的理由进行排序:visited after :hover and :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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
