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

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

This topic created in 3257 days ago, the information mentioned may be changed or developed.

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

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>

Supplement 1 · Jul 9, 2017

感谢 @xbb7766 已解决

6 replies • 2017-07-09 01:39:14 +08:00

lhx2008

Jul 9, 2017 via Android

把 a:hover {放在最下面？

xbb7766

Jul 9, 2017

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

xbb7766

Jul 9, 2017

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

geelaw

Jul 9, 2017

a:not(:hover)

gdtv

Jul 9, 2017

@xbb7766 谢谢，你的方法有效

liyuhang

Jul 9, 2017

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