cssネスティングの問題

Question

2番目のネストされたdivの内部のリンクに赤いテキストが表示されます。

ダウン鈍くCSS：

#outerdiv{ padding:10px; background-color: #ddd;} 
#outerdiv a:link{ color:blue; } 

.innerdiv{ padding:10px; background-color: #aaa;} 
.innerdiv a:link{ color: red; background-color:White;} 

ダウン鈍くHTML：

<div id="outerdiv"> 
     OUTERDIV <a href="#">link</a> 
     <div class="innerdiv"> 
      INNER DIV <a href="#">link</a> 
     </div> 
    </div> 

JSFiddle：http://jsfiddle.net/5S6ez/1/

は、どのように私は私のinnerdivリンクが赤いフォントを持つことができますか？

私のリンクは、それが後のCSSファイルで発生し、それに適用される新しいスタイルを持っているにもかかわらず、可能な限りその祖父母のスタイルの多くを保持します。どうして？

Answer 1

問題がということですベースのセレクタが使用、それを変更するには、クラス名ベースのセレクタよりも具体的である：リンク：

#outerdiv .innerdiv a:link{ color: red; background-color:White;} 

Answer 2

idsの代わりにouterdivクラスを作成してください。このように：

.outerdiv{ padding:10px; background-color: #ddd;} 
.outerdiv a:link{ color:blue; } 

.innerdiv{ padding:10px; background-color: #aaa;} 
.innerdiv a:link{ color: red; background-color:White;} 

ことができない場合は（外側のdivにidでなければならない）、あなたはこのように、outerdivにinnderdivルールはより具体的にするために試みることができます。

#outerdiv .innerdiv{ padding:10px; background-color: #aaa;} 
#outerdiv .innerdiv a:link{ color: red; background-color:White;} 

また、私は最近、この記事に紹介された、そしてそれは本当に一般的に私のCSSで多くのことを支援してきました：

http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

Answer 3

ではなく、使用してください。 ：リンクは未訪問リンクの疑似クラスです。

また、タグはインライン要素でもあり、 "display：inline-block"または "display：inline-block"を設定しない限り、埋め込みなどでスタイルを設定しないことに注意してください。表示ブロック"。ええ、もう少しあなたが尋ねたが、それでも助けになることができます。