请问设置 a 的默认颜色怎样可以不覆盖 a:hover 的样式？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 2477 天前的主题，其中的信息可能已经有所发展或是发生改变。

我希望页面上所有超链接在鼠标移过的时候都显示红色。

CSS:

a:hover {
    color: #FF0000;
}
.myid1 a {
    color: #000000;
}
.myid2 a {
    color: #CCCCCC;
}
/* 必须要添加下面这个样式才能让超链接在鼠标移过时显示红色，有办法可以省略吗？ */
.myid1 a:hover, .myid2 a:hover {
    color: #FF0000;
}

HTML:

<a>aaaaaa</a>
<div class="myid1">
	<a>bbbbbb</a>
</div>
<div class="myid2">
	<a>cccccc</a>
</div>

第 1 条附言 · 2017-07-09 01:28:44 +08:00

感谢 @xbb7766 已解决

6 条回复 • 2017-07-09 01:39:14 +08:00

lhx2008

2017-07-09 00:43:36 +08:00 via Android

把 a:hover {放在最下面？

xbb7766

2017-07-09 00:52:29 +08:00

a:hover 的 color 最后加!Important 看看。

xbb7766

2017-07-09 00:53:05 +08:00

a:hover {
color: #FF0000!Important;
}

geelaw

2017-07-09 01:01:24 +08:00

a:not(:hover)

gdtv

2017-07-09 01:28:54 +08:00

@xbb7766 谢谢，你的方法有效

liyuhang

2017-07-09 01:39:14 +08:00

:hover - CSS | MDN （ https://developer.mozilla.org/zh-CN/docs/Web/CSS/:hover ）
hover CSS 伪类适用于用户使用指示设备虚指一个元素（没有激活它）的情况。这个样式会被任何与链接相关的伪类重写，像:link, :visited, 和 :active 等。为了确保生效，:hover 规则需要放在:link 和:visited 规则之后，但是在:active 规则之前，按照 LVHA 的循顺序声明:link －:visited －:hover －:active。

styleguide/css.md at master · fex-team/styleguide （ https://github.com/fex-team/styleguide/blob/master/css.md#35-important ）
必须注意的是，仅在设计上确实不允许任何其它场景覆盖样式时，才使用内联的 !important 样式。通常在第三方环境的应用中使用这种方案。

A:
.myid1 a {
color: #000000;
}
.myid2 a {
color: #CCCCCC;
}
a:hover {
color: #FF0000;
}

B:
a:hover {
color: #FF0000;
}
.myid1 a {
color: #000000;
}
.myid2 a {
color: #CCCCCC;
}
.myid1 a:hover {
color: #FF0000;
}
.myid2 a:hover {
color: #FF0000;
}

C:
a:hover {
color: #FF0000 !important;
}
.myid1 a {
color: #000000;
}
.myid2 a {
color: #CCCCCC;
}