Question

我定义了2个CSS元素，一个叫做horizontalmenu，另一个叫做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

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

.horizontalmenu a:link, a:visited表示：

锚点是未访问的链接，是来自水平菜单类成员的元素的后缀   和
  被访问链接的锚点。

不意味着：


锚点是未访问的链接，是来自水平菜单类成员的元素的后缀   和
  访问链接的锚点，以及属于horizontalmenu类
成员的元素的后代

你需要：

.horizontalmenu a:link, .horizontalmenu a:visited

（对于同一问题的所有其他实例，类似）

文本颜色的CSS目标不正确

1 个答案: