1

我有一个标签

<a href="https://www.google.com">GOOGLE</a>

具有以下样式：

a {
  color: red
}

a:hover {
  color: green
}

a:active {
  color: blueviolet
}

a:visited {
  color: brown;
}

这是我的问题：

a:hover并且a:active被忽略

我知道这是针对级联规则但我想知道解决它的最佳实践。

我尝试添加!important，它按我的意愿工作。

我更改了行号（因为重要性和规格相等，所以行号很重要）并且它工作正常但我想知道哪种解决方案是最好的！

在大多数情况下添加重要不是一个好主意，并且行号在开发中正在发生变化。

我可以有这样的选择器吗？：

a:not(:hover):visited {
  color: blue
}
4

4 回答 4

3

如果链接已被访问，我假设a:hover并被a:active忽略。如果是这种情况，试试这个：

a {
    color: red
}

a:hover,
a:visited:hover {
    color: green
}

a:active,
a:visited:active {
    color: blueviolet
}

a:visited {
    color: brown;
}
<a href="https://www.google.com">GOOGLE</a>

我可以有这样的选择器吗？ a:not(:hover):visited { color: blue }

是的你可以。

于 2021-10-03T12:44:02.087 回答
0

在为多个链接状态设置样式时，有一些顺序规则：

a:hover 必须紧随其后a:link，a:visited
a:active 必须紧随其后a:hover

a:link {
  color: red
}

a:visited {
  color: brown;
}

a:hover {
  color: green
}

a:active {
  color: blueviolet
}
<a href="https://www.google.com">GOOGLE</a>

请参阅此以了解有关链接及其状态（如hover visited订单）的更多信息

于 2021-10-03T14:37:00.147 回答
0

我建议您阅读本教程。根据那个：

一般来说，伪类的顺序应该如下——:link, :visited, :hover, :active, :focus 以使它们正常工作。

所以如果你把你的CSS文件改成这个，它必须能正常工作：

a:link {
    color: red
}

a:visited {
    color: green
}

a:hover {
    color: blueviolet
}

a:focus {
    color: rgb(230, 49, 175);
}

如果您认为hover和active or ... 无法正常工作，可能是因为您之前访问过该链接。尝试更改“href”地址以查看它们是否正常工作。

于 2021-10-03T13:02:12.040 回答
-1

首先，您忘记了分号
其次，如果 !important有效，请使用它。
第三，我以前从未遇到过这个选择器。
在 W3School 上查看更多信息

于 2021-10-03T12:39:01.730 回答