CSSは、このコードがどのように見えるかは「DIV」要素は他の要素

Question

の奥深くにネストスタイリングCSSを使用して？

注：「コメント」というクラスに注目してください。強調表示された要素とその親要素の両方で使用されます。だから、おそらくこれは少しトリッキーなのでしょうか？

私は以下のCSSコードを試してみました。

.DataList .Item .comment, .DataList .Comment .comment, 
.DataList .FirstComment .comment, .DataList .Mine .comment { 
    border:1px solid #666; 
    padding:10px; 
    border-radius:3px; 
     -moz-border-radius:3px; 
     -webkit-border-radius:3px; 
} 

.DataList .Item div.comment, .DataList .Comment div.comment, 
.DataList .FirstComment div.comment, .DataList .Mine div.comment { 
    border:1px solid #666; 
    padding:10px; 
    border-radius:3px; 
     -moz-border-radius:3px; 
     -webkit-border-radius:3px; 
} 

私は間違っていますか？誰かがこの小さな謎を解くのを助けることを願っています。ありがとう。

Answer 1

まず、極端な特異性でスタイルを設定しないでください（親/要素セレクタを追加する）。このように、あなたはちょうど.Comment - を使用することができます大文字と小文字が区別されることに注意してください。スタイルを上書きしたり、同じ名前が異なる「コンテキスト」（あなたは.Commentとリスト項目を持っており、それが.Commentとdiv要素を持つ子供のように）あなたがより高い特異性を利用する場合、それはだのセレクタを持っている場合は

（親を追加します/セレクタの要素）div.Comment、.Item .Comment