html - 文本颜色的 CSS 目标不正确

Question

我定义了 2 个 CSS 元素，一个叫 horizo​​ntalmenu，另一个叫 footer-links。出于某种原因，当我更改其中一个 div 的悬停文本颜色时，它会更改两者。

以下是相关 2 个部分的 HTML 和 CSS。

HTML

<ul> 
<li><a href="#">Home</a></li> 

<li> <a href="#">Products</a> 
<ul> 
<li><a href="#">Security</a></li>
<li><a href="#">Managed Networks</a></li>
<li><a href="#">Disaster Recovery</a></li>
<li><a href="#">Cloud</a></li>
</ul> 
</li> 

<li> <a href="#">Why Indigo?</a></li>

<li> <a href="#">About Us</a></li>

<li> <a href="#">Contact</a></li>

</ul>
</div>

<div class="bottombar">

        <div class="copyright">
        <h7>&copy; Copyright 2014 Company name</h7>
        </div>

        <div class="footer-links">
        <a href="#">Privacy Policy</a>&nbsp;|
        <a href="#">GC24</a>&nbsp;|
        <a href="#">Call Rates</a> 
        </div>

</div>

CSS

.horizontalmenu  a:link, a:visited{
color: #003399 !important;
}

#horizontalmenu li ul  li:hover a,
#horizontalmenu li ul li a:hover {
    color: #fff !important;

.footer-links a:link, a:visited{
    font: 'Gill Sans MT';
    font-size: 12px;
    font-weight: normal;
    text-decoration: none;
    color: #fff;
}

.footer-links a:hover{
    text-decoration: underline;
    color: #fff;
}

谁能帮我理解为什么会这样？

谢谢，

Answer 1

逗号没有您认为的优先级。

.horizo​​ntalmenu a:link, a:visited 表示:

Anchors that are unvisited links and descended from elements that are members of the horizontalmenu class
and
anchors that are visited links.

它不意味着:

Anchors that are unvisited links and descended from elements that are members of the horizontalmenu class
and
anchors that are visited links and descended from elements that are members of the horizontalmenu class

你需要:

.horizontalmenu  a:link, .horizontalmenu a:visited

(对于同一问题的所有其他实例也类似)