CSS 伪类放在哪里？答案

【问题标题】：Where to put CSS pseudo classes?CSS 伪类放在哪里？
【发布时间】：2016-06-28 02:27:54
【问题描述】：

网上有一些关于编写更好的 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 等）

我应该把伪类放在哪里？

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

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

【问题讨论】：

对于什么是“最佳实践”总是有意见。但是，当涉及到链接时，它们应该是placed in LVHA order（链接、已访问、悬停、活动）。这可确保正确覆盖每个状态。
没有“主要”或次要 CSS 伪类。您指的是动态伪类。你说的大概就是这个意思。有很多不同的种类，你还必须考虑它们的顺序。好消息是，除了特异性和LVHA ordering，这完全取决于个人喜好。

标签： css pseudo-class readability

【解决方案1】：

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

例如一个链接css：

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

【讨论】：

是的，我也是这样做的。对于默认选择器，我尝试将“最大”/“最常用”降至最低。所以 H1、H2 等，然后是 P、span 等。直到我到达像 .center 这样的“通用类”来制作 text-align:center，最后是自定义 id/类，对于我制作的任何自定义，比如“#登录表单”

【解决方案2】：

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

【讨论】：