css - 我需要指定每个链接颜色状态吗？

Question

我正在使用以下伪类：

a.recentposttitle:link,a.recentposttitle:visited {color:#000;}
a.recentposttitle:hover {color:#56A49F;}
a.recentposttitle:active {color:#000;}

我需要那么明确还是有更压缩的方式来获得相同的结果？

Answer 1

不，没有速记。但是您的选择器可以是：

a {}

全选links，或：

.recentposttitle {}

获取所有.recentposttitle元素（我们知道它们已经是链接）。

---

还有一件事，:link真的不需要，你可以写：

a {}
a:visited {}
a:hover {}
a:active {}

当您编写 时a {}，您将为所有可能的情况设置声明，因此：

a {}

等同于：

a:link, a:visited, a:hover, a:active {}

• 请记住，顺序pseudo classes很重要：
  • : l墨水
  • :访问过
  • :结束_
  • :主动_
• 或者只是记住L o V e HA te。

Answer 2

我需要找到我之前读过的参考资料来确认这一点，但是 AFAIK，:link伪选择器仅在您使用旧式页面锚 ( <a name="..."></a>) 时才是必需的，因此您应该能够安全地消除它。由于你的:active和:visited规则是相同的，你可能会减少你所展示的内容：

a.recentposttitle:active, a.recentposttitle:visited {color:#000;}
a.recentposttitle:hover {color:#56A49F;}

但是你并没有真正节省那么多字节，所以很难说它是否值得。

Answer 3

CSS 中没有用于锚点/链接的伪类的简写选择器。所以你所拥有的非常简洁。

W3 链接培训

a:link{ Declarations }
a:visited{ Declarations }
...
a:hover{ Declarations }
a:active{ Declarations }

Answer 4

您可以使用 CSS 框架（如LESS或SASS.

就像你的例子一样，

CSS：

a.recentposttitle:link,a.recentposttitle:visited {color:#000;}
a.recentposttitle:hover {color:#56A49F;}
a.recentposttitle:active {color:#000;}

例如，如果您使用SASS，您可以将其压缩为..

a.recentposttitle {
  color: #000;
  &:link{ color: #000; }
  &:hover { color: #56A49F; }
  &:visited { color: #000; }
  &:active{ color: #000; }
}

您还可以使用Emmet, 以前称为Zen coding最大代码压缩。

希望这可以帮助。