Question

我对CSS用来确定在悬停事件期间用于锚标记的颜色的逻辑感到困惑。如果相关，我在Mac OS X 10.10.3上使用Chrome版本43.0.2357.81（64位）。

如果我为a标记和a:hover的全局样式规则声明了全局样式规则，则在某些情况下，为a标记选择的颜色似乎也是用于覆盖悬停颜色，但有时候悬停颜色将从全局a:hover规则中获取。我知道这很令人困惑，所以这是代码：

CSS

a {
    color:blue;
}

a:hover {
    color:red;
}

#container a {
    color: orange;
}

#container2 a {
    color:green;
}

footer a {
     color: pink;   
}

HTML

<a href="#">Body Link: Color changes on hover</a>

<div id="container">
    <a href="#">#Container Link: Color does not change on hover</a>
</div>

<div id="container2">
    <ul>
        <li><a href="#">#Container2 Link: Color does not change on hover</a></li>
    </ul>
</div>

<footer>
    <ul>
        <li><a href="#">Footer Link: Color changes on hover</a></li>
    </ul>
</footer>

以下是工作代码的小提琴：http://jsfiddle.net/flyingL123/cLunqpbx/

为什么只在某些链接上悬停时颜色会发生变化？

Answer 1

这个问题与CSS优先级有关。

在您的演示中，如果您想在悬停所有链接时进行颜色更改，请使用！important;

a:hover {
    color:red!important;
}

新演示http://jsfiddle.net/cLunqpbx/7/

锚标签CSS悬停颜色逻辑

1 个答案: