a:link a:visited a:hover a:active 的 CSS 相同样式，真的要写 4 次答案

【问题标题】：CSS same style for a:link a:visited a:hover a:active, really have to write it all out 4 timesa:link a:visited a:hover a:active 的 CSS 相同样式，真的要写 4 次
【发布时间】：2017-05-12 09:37:30
【问题描述】：

嗬嗬，

使用 CSS 时。如果 a:link a:visited a:hover a:active 的 CSS 样式相同，是否真的需要多次写出来。使用自定义链接。

.DT_compare a:link {
    font-family:"Lucida Grande", Arial, sans-serif;
    font-size:11px;
    line-height:14px;
    font-weight:normal;
    font-style:normal;
    color:#EEE;
    text-align:center;
}

有什么捷径吗？

太棒了

【问题讨论】：

标签： css css-selectors

【解决方案1】：

我认为你不能做任何比：

.DT_compare a:link,
.DT_compare a:visited,
.DT_compare a:hover,
.DT_compare a:active, {
    font-family:"Lucida Grande", Arial, sans-serif;font-size:11px;line-height:14px;font-weight:normal;font-style:normal;color:#EEE;text-align:center; }

【讨论】：

我假设您有一些样式想要覆盖此处的默认浏览器样式，这就是为什么我仍然建议明确说明它们的原因。如果您不这样做，请按照其他人的建议进行操作。
@Marthin：特异性可能是a:hover 和a:active 的问题。见他的评论。

【解决方案2】：

忘记伪类，只选择a：

.DT_compare a {
    font-family:"Lucida Grande", Arial, sans-serif;
    font-size:11px;
    line-height:14px;
    font-weight:normal;
    font-style:normal;
    color:#EEE;
    text-align:center;
}

虽然这不是一个非常具体的选择器；如有必要，您可以找到其他方法来增加它，使其覆盖您的 a:hover 和 a:active 选择器，或者改用 whoughton's answer 并指定所有四个。

再一次，如果您的主要超链接样式适用于 a:hover 和 a:active 之前没有任何内容，只要您将 .DT_compare a 规则放在它们下面，它应该可以正常工作。

【讨论】：

【解决方案3】：

只需关闭:link 即可立即影响所有状态。

【讨论】：

【解决方案4】：

Less 可以通过 'mixins' 提供帮助，例如：

.a {
  text-decoration: none;
  color: black;
}

a:link { .a; }
a:visited { .a; }

如果有更好的方法，我不会感到惊讶，但这是我所知道的最好的方法。 less 非常棒 - 它基本上是 CSS，但程序员会如何设计它。你再也不用重复自己了……

【讨论】：

【解决方案5】：

.DT_compare a[href]{ ... }

很好，因为您可以在那里潜入一些额外的特异性。（不过，属性选择器 == 类选择器）。

【讨论】：

【解决方案6】：

.DT_compare a:link, a:visited {
font-family:"Lucida Grande", Arial, sans-serif;
font-size:11px;
line-height:14px;
font-weight:normal;
font-style:normal;
color:#EEE;
text-align:center;
}

.DT_compare a:hover, a:active {
font-family:"Lucida Grande", Arial, sans-serif;
font-size:11px;
line-height:14px;
font-weight:normal;
font-style:normal;
color:#EEE;
text-align:center;
}

【讨论】：

已经回答了。哇。不能只输入答案，它必须缩进 4 个空格，然后哇
至于为什么这个答案是错误的：逗号的优先级最低；为了表达海报想要表达的意思，选择器应该是.DT_compare a:link, .DT_compare a:visited（等等）。也没有什么将逗号限制为两个选择器，您也可以指定所有四个。