css 中的级联样式规则

Question

我有一个标签

<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，它如我所愿成功了。

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

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

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

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

Answer 1

首先，你忘记了分号
其次，如果 !important 有效，就使用它。
第三，我以前从未遇到过这个选择器。
在 W3School

上查看更多相关信息

Answer 2

我假设 a:hover 和 a:active 被忽略 如果 link 已经被访问过 。如果是这样，试试这个：

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>

can I have some kind of selector like this ? a:not(:hover):visited { color: blue }

是的，你可以。

Answer 3

我建议你阅读this Tutorial。根据那个：

In general, the order of the pseudo classes should be the following — :link, :visited, :hover, :active, :focus in order for these to work properly.

所以如果您将 CSS 文件更改为这个文件，它一定能正常工作：

a:link {
    color: red
}

a:visited {
    color: green
}

a:hover {
    color: blueviolet
}

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

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

Answer 4

设置几个link状态的样式时，有一些顺序规则：

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>

See this 了解更多关于 link 和他们的状态 hover visited order

css 中的级联样式规则

cascade rules of styling in css

css

css-cascade