哪里放CSS伪类？

Question

网上有一些关于写得更好 CSS 的技巧，例如按字母顺序排序属性，但没有人提到伪类的最佳实践，例如

nav ul {
  /*main styles*/
}
nav ul:hover li.selected {
  background-color: transparent;
}
nav ul li {
  /*main styles*/
}
nav ul li:hover {
  background: #ffaacc;
}

您可能认为这根本没有必要（其实上面的代码中没有），但我发现有一种特定的方法很重要，当您有 CSS 文件超过 1000 行并考虑所有主要 CSS 伪类（例如 :link :hover :active :focus :blur :visited 等）

我应该把伪类放在哪里？

我应该把它们放在一个单独的地方（文件末尾还是另一个特定文件）？

我应该把它们放在默认选择器的正下方吗？

Answer 1

它们应该位于其默认选择器下方，以便将来编辑它的人可以轻松找到它。

Answer 2

根据需要将它们直接包含在元素默认选择器之后。我通常从用户交互的角度订购伪类，有人将鼠标悬停在 link 上，然后再将其激活，因此以这种方式订购等等。

例如link css:

元素CSS
:link
:visited（向前移动，因此 :hover 和 :active 可以覆盖它）
:hover
:active

哪里放CSS伪类？

Where to put CSS pseudo classes?

css

readability

pseudo-class