我是否需要指定每个链接颜色状态？

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的顺序是重要的：
  • ： 1 的墨水
  • ： v isited
  • ：ħ在
  • ： A 的莫如
• 或者只记得 L o V e HA te。

Answer 2

CSS中没有用于锚类/链接的伪类的速记选择器。所以你所拥有的就像你能得到的一样简洁。

W3 Link Training

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

Answer 3

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

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

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

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）进行最大代码压缩。

希望这有帮助。