css - 「#idli{...}」と「#id>li{...}」の違い

Question

私はこれらの2つのやや似たようなものに出くわしました。私のアプリケーションの1つでは、特にを使用する場合、これら2つの間に違いがありますIE7。私は疑問に思います：これら2つの大きな違いは何ですか。自由に詳細なサイトリンクを作成してください。

Answer 1

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/

Answer 2

スペースはすべての子孫を選択します。は直接の子孫（「子」要素）>のみを選択します。

すべてのセレクターの概要については、このw3ページを参照してください。そのページから：

E> F...E要素のF要素の子...子コンビネータ

と：

EF...E要素のF要素の子孫...子孫コンビネータ

この違いはIE7に固有のものではないことに注意してください。きちんと最新のブラウザはすべて、両方の構文をサポートしています。同じセレクターがCSS2にも存在します。quirksmodeでは、IE6以下（* shudder *）で子セレクターに問題があることがわかります。

Answer 3

これは、＃id要素の下にあるすべての要素に適用されます li

#id li

これは、＃id要素のすぐ下のli要素にのみ適用されます

#id > li