我有以下 HTML,它是由插件输出的,所以我无法更改某些输出:
<div id="submenu">
<h2>text</h2>
<!-- can't change start -->
<ul class="nav secondary">
<li class="active"><a href="#">Contact Info</a></li>
<li><a href="#">About You</a></li>
</ul>
<!--cant' change end-->
</div>
具体来说,我无法控制获取输出的 UL 类名(辅助导航)、li 标签(事件类是问题所在)和 a 标签。
问题是我不知道如何让 li.active 更改事件链接的 a 标签的字体颜色。这是我的 CSS:
#submenu {
float: left;
width: 100%;
height: 53px;
margin: 0px 0px 12px 0px;
padding: 5px 0px 2px 0px;
border-bottom: 1px solid #eeeeee;
}
#submenu h2 {
}
#submenu ul {
margin: 0;
padding: 0;
float: right;
}
#submenu li {
list-style: none;
float: left;
padding: 12px 0px 0px 28px;
display: inline;
}
#submenu li a {
color: #333333;
}
#submenu a:hover {
color: #A0A0A0;
}
#submenu a {
padding:0px;
}
#submenu .active {
color:#CC0000; /**#A0A0A0; */
}
#submenu .nav > li > a:hover {
padding:0px;
background:none;
}
特殊性让我感到困惑。如何让 li.active 覆盖链接的字体颜色?
最佳答案
这与特异性无关。
#submenu li a
匹配 a
元素,但 #submenu .active
匹配 li
元素。
没有任何东西将 a
设置为 color: inherit
所以它永远不会从 li
元素中获取颜色。
更改选择器以匹配 a
而不是 li
:
#submenu li.active a
关于html - 菜单中事件标签的 css 特异性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19413511/