CSSのカスケーディングの理解

Question

Hy、

私はCSSを初めて使いこなしています。以下のコードでは、スタイルを解釈/読み込みして理解する方法を説明します。スタイルdefが、 "p220mid"クラスを使用するdivの下のlist要素とul要素に適用されるかどうか、またはどのように動作するか。皆さんはサンプルをくれますか？

.p220mid ul li 
{ 
    background:transparent URL('images/bline.gif') repeat-x bottom; 
    width:205px; 
    height:28px; 
    margin-left:4px; 
    padding-left:4px; 
    color:4c76a0; 
} 

ありがとう、 Appu。

Answer 1

あなたが持っているものは、p220midのクラスを持つすべての要素の中のulのすべてのli要素を対象にします。

あなたはすべてのULおよびあなたのdivの中のすべてのli要素をターゲットにする場合は、.p220mid ul, .p220mid ul li

Answer 2

セレクタをしたいと分類すべての要素の子孫そのものであるすべてのUL要素の子孫であるすべてのli要素は、」スタイルを言います。 p220mid」となる。

Answer 3

CSS：

.p220mid ul li { 
      background:transparent URL('images/bline.gif') repeat-x bottom; 
      width:205px; 
      height:28px; 
      margin-left:4px; 
      padding-left:4px; 
      color:4c76a0; 
    } 

HTML：

<div class="p220mid "> 
    <ul> 
     <li> 
     class style will be apply here 
     <li> 
    </ul> 
    </div> 

Answer 4

私のリンクhttp://jsfiddle.net/YyqYN/（あなたがより明確に見ることができるように私は、背景画像のURLを変更した）

をチェック基本的に、このスタイルは、表示されるhtmlのセットにのみ適用されます。 .p220mid ul li。あなたのスタイル要素の間で定義された空間（.p220mid UL李）を持っているので

Answer 5

が、これはつまり、クラス=「p220mid」と<UL>要素の下にネストされた任意の<李>子孫要素（つまり、直接の子かどうか孫または曾孫）は、スタイルが適用されます。

あなたはスタイル

<div class="p220mid"> 
    <ul> 
     <li> 
     class style will be applied here 
     <li> 
    </ul> 
</div> 

を適用します。この例を明確にするため、ここでの構文

のより良い理解を持っているCSS Selectors上に読んでくださいので、この例では、意志

<div class="p220mid"> 
    <div> 
     <ul> 
      <li> 
       class style will also be applied here 
      <li> 
     </ul> 
    </div> 
</div>