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

V2EX = way to explore

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

现在注册

已注册用户请登录

Can I use?

http://caniuse.com/

Less

http://lesscss.org

Cool Libraries

Bootstrap from Twitter

Jetstrap

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

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

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 年 7 月 9 日

感谢 @xbb7766 已解决

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

lhx2008

2017 年 7 月 9 日 via Android

把 a:hover {放在最下面？

xbb7766

2017 年 7 月 9 日

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

xbb7766

2017 年 7 月 9 日

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

geelaw

2017 年 7 月 9 日

a:not(:hover)

gdtv

2017 年 7 月 9 日

@xbb7766 谢谢，你的方法有效

liyuhang

2017 年 7 月 9 日

: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;
}