css中样式的级联规则答案

【问题标题】：cascade rules of styling in csscss中样式的级联规则
【发布时间】：2021-11-24 05:14:43
【问题描述】：

我有一个标签

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

【问题讨论】：

标签： css css-cascade

【解决方案1】：

我假设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;
}

&lt;a href="https://www.google.com"&gt;GOOGLE&lt;/a&gt;

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

是的，你可以。

【讨论】：

【解决方案2】：

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

一般来说，伪类的顺序应该如下——: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 或 ... 无法正常工作，可能是因为您之前访问过该链接。尝试更改“href”地址以查看它们是否正常工作。

【讨论】：

【解决方案3】：

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

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
}

&lt;a href="https://www.google.com"&gt;GOOGLE&lt;/a&gt;

See this 了解更多关于链接及其状态的信息，例如 hover visited 订单

【讨论】：

【解决方案4】：

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

【讨论】：

不鼓励使用!important。 CSS Specificity。使用它会使代码更难理解。
!important 应该只保留在那些需要覆盖一些外部库样式而没有提供其他方法的情况下。
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。