为什么链接伪类不能在类选择器上工作？答案

【问题标题】：Why don't link pseudo-classes work on class selector?为什么链接伪类不能在类选择器上工作？
【发布时间】：2016-10-26 05:09:16
【问题描述】：

Here is a JSFiddle 说明问题。

使用这个 CSS：

.btn {position:relative; width:auto; background:#2c96c9; color:#fff; cursor:pointer}
.btn a:link {color:#fff; text-decoration:none}
.btn a:visited {color:#fff; text-decoration:none}
.btn a:hover {color:#000; text-decoration:none}
.btn a:active {color:#000; text-decoration:none}

a: 规则均未应用于此 HTML：

<a class="btn" href="http://google.com">Why doesn't this work?</a>

为什么？或者让它们应用于 HTML 链接的正确方法是什么？

【问题讨论】：

选择器:link、:visited、:hover 和:active 是pseudo classes 不是伪元素。 ::after 和 ::before 是 pseudo elements 的示例...
.btn 和 a 之间的空格表示查找作为 .btn 类元素后代的锚点。
@War10ck - 谢谢；刚刚修好。

标签： html css css-selectors pseudo-class

【解决方案1】：

您的选择器不起作用，因为您当前在 .btn 类的元素中选择了 a 标记，因为 space in selectors 表示选择后代。就像现在写的那样，它会建议这样的标记：

<div class="btn" >
    <a href="http://google.com">Why doesn't this work?</a>
</div>

但是对于<a class="btn" href="...">...</a>，你应该使用：

.btn {position:relative; width:auto; background:#2c96c9; color:#fff; cursor:pointer}
a.btn:link {color:#fff; text-decoration:none}
a.btn:visited {color:#fff; text-decoration:none}
a.btn:hover {color:#000; text-decoration:none}
a.btn:active {color:#000; text-decoration:none}

【讨论】：

【解决方案2】：

您需要颠倒顺序；元素选择器应该列在伪类之前。

【讨论】：