このようなCSSをターゲットとするクラスの違いは何ですか？

Question

はのは、私がspanクラスの要素をターゲットにしたいとしましょう：

私はこのように行う場合、それは何の影響もありません：

ul#sponsors li span .spanelement { 
} 

をしかし、私はこのように行う場合：

ul#sponsors li span.spanelement { 
} 

これは機能しています。ここの違いは何ですか？

Answer 1

この1：

ul#sponsors li span .spanelement { } 

がclass="spanelement"持つ任意の要素に一致し、それは（ID =「スポンサー」とUL内部のLi内にある）スパンの内側でなければなりません。この1

：

ul#sponsors li span.spanelement { } 

<span class="spanelement">

は、それ自体が（それはID = "スポンサー" とUL内部のLi内部情報提供）と一致します。

Answer 2

最初はあなたのspan秒、第二選択クラスでspanの内側にクラスspanelementを持つ要素を選択spanelement

秒スパン自体一致しますが、ここで<p>と一致しますので、最初：

<ul id="sponsors"><li><span class="spanelement"><p class="spanelement">SOMETHING</p></span></li>/<ul> 

を

スパン内に何もない場合、または内部の要素がクラスspanelementを持たない場合、最初のクエリは何も一致しません。

Answer 3

2番目の例では、spanとspanelementの間にスペースはありません。 このCSSセレクタステートメントは、スパンをのクラス "spanelement"で対象としています。

例：それはINSIDEspanelementクラススパンですべてのタグを選択するようにスペースを追加

<span class="spanelement"> 

セレクタを変更します。

例：

<span> 
<spanelement\> 
</span>