どのくらいCSSが "見る"

Question

私は純粋なCSSの2つのステップの階層ドロップダウンメニューをコーディングしようとしています。私は自分で痛みの分野を通してコードや耕作をコピーしたくない。

idを持つdiv内に順序付けられていないリストを含め、そのidの下にすべてをスタイルすることで、すべてが制御されるようにしたいと考えました。

私はある

#nav ul ul ul {} 

#nav ul ul {}

間

と

はそう私の質問は、例えばCSS区別できているCSSはHTML構造を見ているかのロジックを見極めるしようとしていますこれは悪いアプローチですか？

私はリストに関する1がある場合は右の構文ものです

#nav li ul {} 

と

#nav li li ul{} 

のようにブレンドした場合、同様の効果を得るように見えます。 私が見たすべてのコードは異なっているようであり、明確な整合性を見つけることはできません。

この問題についていくつかの光を当てはめることができれば、あらかじめありがとうございます。

例：

私は同じロジックをコーディングしに行きましたが、私は、CSSはこれらを区別するために見えることはできません。

#nav ul ul { 
    position:absolute; 
    left:-9999px; 
} 

#nav ul li:hover ul{ 
    position:absolute; 
    left:auto; 
    border:1px solid blue; 
    z-index:100; 

} 

と

#nav ul ul ul{ 
    position:absolute; 
    left:-9999px; 
} 

#nav ul ul li:hover ul{ 
    position:absolute; 
    left:auto; 
    border:1px solid blue; 
z-index:200; 
} 

それはより深いツリーを無視し、即ち、それは習慣第ULを隠し、両方に効果のセットもみを適用します。それはの意味での（UL親を持っている場合（>

Answer 1

#nav ul ul {} 

と

#nav ul ul ul {} 

は全く異なるセレクタがあることで、私は、具体的にそれを指示しない限り。最初は#navでULを選択します"祖先"で、必ずしも直接の親ではない）、2番目のulは2つのulの親を持つ#navのulのみを選択します。

Answer 2

CSS #nav ul ul {}と#nav ul ul ul {}を区別することができます異なる要素を対象とする。他の任意のものは、#nav要素内のul内のul内のul内のul内の！

理由選択子が#nav li ul {}と#nav ul ul {}の場合、同じ結果がHTMLが構造化されているためですまたliの中に見つかったulは暗黙のうちにliの親のulにも見られます。

パフォーマンスの理由からセレクタをできるだけ短くしておくことをお勧めします（たとえば、YSlowまたはGoogle Page Speedを使用してページを分析する「効率の悪いセレクタ」の候補など）。

しかし、ちょっとウェブマスターフォーラムでinteresting postと表示されていましたが、それはやや不一致です。

Answer 3

私が知る限り、CSSセレクタのネスト制限はありません。ただし、特定の要素のグローバルルールを記述するのではなく、マークアップにIDやクラスなどの識別子を与えることで、ダウンロード時間を節約できます。あなたの結果は

#nav li ul {} 

と

#nav li li ul {} 

のために同じです

理由は、セレクタの間にスペースを使用していることです。 CSSがセレクタの間に空白を見たとき、「#navのliの下位であるすべてのulを探してください」と言います。つまり、非常に遠くにネストされた要素でも（#nav li li li li li li ulなど）でも見つかります。あなただけのトップレベルのULを選択したい場合は、そのように、代わりに>記号を使用することができます。

#nav > li > ul {} 

は、上記の要素を選択しますので、（スターを付けた要素が選択されている）のように：

<div id="nav"> 
    <li> 
    **<ul>** 
     <li> 
      <ul> 

何をやっているのに対し

はこれです：

この選択されます

#nav li ul {} 

：

<div id="nav"> 
    <li> 
    **<ul>** 
     <li> 
      **<ul>** 

を

もっと明確ですか？