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

Question

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链接的正确方法是什么？

Answer 1

您的选择器不起作用，因为您当前在类a的元素中选择了.btn标记，因为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}

Answer 2

您需要撤消订单;元素选择器应该在伪类之前列出。