Question

应该很容易，但我无法弄明白！这是CSS：

nav {color: #505050; font-size: 15px; line-height: 18px; word-spacing: 13px; float: right; margin-right: 16px;padding-top: 36px; width: 60%;}


nav ul ul{display: none;}

nav ul li:hover > ul {display: block;/* [disabled]color: #ccc; */}

nav ul {padding: 0 5px;border-radius: 10px;list-style: none;position: relative; display: inline-table;}

nav ul:after {content: ""; clear: both; display: block; }

nav ul li {float: left;}

nav ul li:hover a {color: #e80031;}

nav ul li a {display: block; padding: 4px 12px;color: #505050; text-decoration: none;}

nav a {text-decoration: none;}

nav a:visited { color: #505050; }

nav a:hover {color: #e80031;text-decoration: none;text-weight: bold;}

nav ul ul {background: #FFF;border-radius: 5px;border: thin solid #CCC;padding: 0px;position: absolute;top: 100%;right: 70%;z-index: 50;word-spacing: .2em;}

nav ul ul li {float: none;color:#505050;/* [disabled]border-top: 1px solid #6b727c; *//* [disabled]border-bottom: 1px solid #575f6a; */position: relative;}

nav ul ul:hover a {color: #ccc;}

nav ul ul li:hover a {background: #ccc;}

nav ul ul li a:link {color:#e80031;}

nav ul ul li a:visited {/* [disabled]color:#e80031; */}

nav ul li.active a{color: #e80031;font-weight: bold;}

Answer 1

嗯，可能真正影响链接颜色的规则是（按特定顺序）

nav a:hover {color: #e80031;text-decoration: none;text-weight: bold;}
nav ul li a {display: block; padding: 4px 12px;color: #505050; text-decoration: none;}

nav ul li:hover a {color: #e80031;}
nav ul ul:hover a {color: #ccc;}
nav ul li.active a{color: #e80031;font-weight: bold;}

最后的3具有相同的特异性，因此它们在您的文件中的顺序将确定如果它们与元素匹配则适用

对于子菜单，您可以将nav ul li:hover a {color: #e80031;}规则扩展为

nav ul li:hover a,
nav ul ul li:hover a {color: #e80031;}

阅读http://www.w3.org/TR/selectors/#specificity了解详情，并使用工具在http://specificity.keegan.st/

上比较它们

Answer 2

正如盖比已经提到的，你在这里发生了一些特异性战争，但是你也不清楚你遇到的问题没有得到正确的颜色。所以，我在这里疯狂地猜测它可能与这条规则有关：

nav ul ul:hover a {color: #ccc;}

将其更改为：

nav ul li:hover ul li a {color: #ccc;}

请参阅此代码：http://codepen.io/keithwyland/pen/CzEcd

我的导航子菜单链接在悬停时没有改变颜色？

2 个答案: