私はこれらの2つのやや似たようなものに出くわしました。私のアプリケーションの1つでは、特にを使用する場合、これら2つの間に違いがありますIE7
。私は疑問に思います:これら2つの大きな違いは何ですか。自由に詳細なサイトリンクを作成してください。
3 に答える
X Y
標準との違いはX > Y
、後者は直接の子のみを選択することです。たとえば、次のマークアップについて考えてみます。
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
のセレクターは#container > ul
、コンテナーのIDを持つdivの直接の子であるulのみをターゲットにします。たとえば、最初のliの子であるulはターゲットになりません。
このため、子コンビネータを使用するとパフォーマンス上の利点があります。実際、JavaScriptベースのCSSセレクターエンジンを使用する場合は特にお勧めします。
ソース: http: //net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
スペースはすべての子孫を選択します。は直接の子孫(「子」要素)>
のみを選択します。
すべてのセレクターの概要については、このw3ページを参照してください。そのページから:
E> F...E要素のF要素の子...子コンビネータ
と:
EF...E要素のF要素の子孫...子孫コンビネータ
この違いはIE7に固有のものではないことに注意してください。きちんと最新のブラウザはすべて、両方の構文をサポートしています。同じセレクターがCSS2にも存在します。quirksmodeでは、IE6以下(* shudder *)で子セレクターに問題があることがわかります。
これは、#id要素の下にあるすべての要素に適用されます li
#id li
これは、#id要素のすぐ下のli
要素にのみ適用されます
#id > li