為什么不能在類選擇器上鏈接偽類呢？

Question

這是一個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

選擇器不起作用，因為您當前正在.btn類的元素內選擇a標簽，因為選擇器中的空格意味着選擇后代。 就像現在寫的那樣，它將建議這樣的標記：

<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

您需要撤銷訂單； 元素選擇器應在偽類之前列出。