擬似クラスをリンクしないと、クラスセレクタが機能しないのはなぜですか？

Question

Here is a JSFiddle問題を説明します。このCSSで

：

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

理由：a:ルールの

.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} 

なしには、このHTMLに適用されますか？あるいは、HTMLリンクにそれらを適用させる適切な方法は何ですか？

Answer 1

は子孫を選択するため、.btnの要素内に現在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

;：

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

しかし、あなたが使用する必要があり<a class="btn" href="...">...</a>のため：それが今書かれているとして、それはこのようにマークアップをお勧めします要素セレクタは疑似クラスの前にリストされるべきです。