Question

这是我以前从未遇到的事情：

＆＃13;

/* These first two rules are in a CSS library */
a { 
  color: #1EAEDB;
}

a:hover { 
  color: #0FA0CE;
}

/* This rule is my own */
.example a:link {
  color: #000;
}

＆＃13;

<div class="example">
  <a href="http://stackoverflow.com/doesntexist">StackOverflow</a>
</div>

＆＃13;

我试图改变just：link状态的颜色而不影响：悬停。这在CSS中是否可行？

前两个规则来自图书馆，因此我无法更改它们或订单。

Answer 1

您的:link前面有班级，所以it is more specific，并且悬停当前位于:link之前，因此颜色会被:link颜色覆盖。

Here is a neat Specificity Calculator

受限制

复制:hover并将类放在其前面，以增加其特异性。确保您使用LVHA order（:link，:visited，:hover，:active）

＆＃13;

a {
  color: #1EAEDB;
}
a:hover {
  color: #0FA0CE;
}
.example a:link {
  color: #000;
}
.example a:hover {
  color: #0FA0CE;
}

＆＃13;

<div class="example">
  <a href="http://stackoverflow.com/doesntexist">StackOverflow</a>
</div>

＆＃13;

正确的方法 - 没有限制

使用.example a:hover。
将:hover 放在<{em> :link之后。请务必使用LVHA order（:link，:visited，:hover，:active）（强调我的）：

：链接CSS伪类允许您选择元素内的链接。 ：此将选择任何链接，即使那些已经使用选择器设置样式的链接其他与链接相关的伪类如：hover ，：active或：visited。在为了仅设置非访问链接的样式，您需要输入：link规则在其他之前，由LVHA订单定义:: link - ：visited - ：hover - ：active。

工作示例

＆＃13;
＆＃13;
a { color: #1EAEDB; } .example a:link { color: #000; } .example a:hover { color: #0FA0CE; }
＆＃13;
<div class="example"> <a href="http://stackoverflow.com/doesntexist">StackOverflow</a> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您必须提供：hover css

.example a:link {
  color: #000;
}
.example a:hover{
  color: #0FA0CE;
}

因为.example a:link比a:hover

更具体

让我们看看特异性是如何起作用的：

Selector (per selector)          |Specificity    |     Specificity
----------------------------------------------------------------
inline-style                     | 1 0 0 0       |      1000
id selector                      | 0 1 0 0       |       100
class,pseudo,attribute selector  | 0 0 1 0       |        10
type selector and pseudo elements| 0 0 0 1       |         1   
------------------------------------------------------------------

因此.example a:link等于10+1+10 = 21且a:hover等于1+10=11。

因此，在提供:hover后，特异性值将相等，但最后一条规则将由css采用。

Answer 3

我认为问题在于你的悬停风格的顺序和特殊性。这有效：

{
  color: #1EAEDB;
}

.example a:link {
  color: #ff00ff;
}

.example a:hover {
  color: #38ce33;
}

Answer 4

.example a:not(:hover) {
    color: #000;
}

成功了！

更改链接CSS颜色而不更改：悬停颜色

4 个答案:

受限制

正确的方法 - 没有限制

工作示例