html - 试图突出显示事件标签的 CSS 继承问题

Question

我试图突出显示事件 <a>但是，我的 CSS 被覆盖了。

#portfolio-filter li a {
    color: black;
    text-decoration: none;
    padding:3px 8px 3px 8px;
    background:#8d8d8d;
}

#portfolio-filter li:hover, a.filter.active { 
    background: white; 
}

<ul id="portfolio-filter">
    <li>
        <a href="#all" class="filter active" data-filter="all" title="">All</a>
    </li>
    <li> etc... </li>
</ul>

#portfolio-filter li a样式正在覆盖 #portfolio-filter li:hover, a.filter.active风格，不确定我需要做什么来解决这个问题。

链接:http://velnikolic.com/ramova3/?page_id=25

Answer 1

问题是 #portfolio-filter li a 更多 specific比 a.filter.active。由于背景位于 a 元素上，而不是 li 元素上，因此即使 #portfolio- 你的 a 背景也不会改变filter li:hover 更具体。

要修复它，请使用类似 #portfolio-filter li a.filter.active 的东西，它更具体并且会正确地优先。

作为一般经验法则，在使用事件类时，始终使用与原始(非事件)定义相似的选择器。否则，您可能会遇到像这样的特异性问题。

这是一个 useful specificity calculator有疑问时。