为什么 link 伪 classes 在 class 选择器上不起作用？

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}

None a: 规则应用于此 HTML:

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

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

Answer 1

你的 selector 不起作用，因为你目前 select a 标签位于 class .btn 的元素内，因为 space in selectors 表示 selecting 一个后代。正如现在所写的那样，它会建议这样的标记：

<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

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