40
  1. CSSul > li > a {...}との違いは何ですか？ul li a {...}
  2. どちらがより効率的で、なぜですか？
4

6 に答える 6

59

" >"は子セレクターです

" "は子孫セレクターです

違いは、子孫は要素の子、要素の子の子、または子の子の子になることができるということです。

子要素は、親要素内に直接含まれている要素です。

<foo> <!-- parent -->
  <bar> <!-- child of foo, descendant of foo -->
    <baz> <!-- descendant of foo -->
    </baz>
  </bar>
</foo>

この例では、はとにfoo *一致<bar>しますが<baz>、はにのみfoo > *一致し<bar>ます。

2番目の質問について：

どちらがより効率的で、なぜですか？

開発とはまったく関係がないので、実際にはこの質問に答えるつもりはありません。CSSレンダリングエンジンは非常に高速であるため、CSSセレクターをできるだけ短くする以外に最適化する理由はほとんどありません*。

マイクロ最適化について心配するのではなく、目前のケースに適したセレクターの作成に焦点を合わせます。>ネストされたリストをスタイリングするときは、リストのどのレベルがスタイリングされているかを区別することが重要であるため、セレクターをよく使用します。

*それが本当にページのレンダリングの問題である場合は、ページに要素が多すぎるか、CSSが多すぎる可能性があります。次に、実際の問題が何であるかを確認するためにいくつかのテストを実行する必要があります。

于 2012-06-27T13:41:27.103 に答える
16

ul>liliの直接の子でulあるすべてを選択しますが、（好きなだけ深く降順で）内のどこかにあるul liすべてを選択しますliul

HTMLの場合：

<ul>
  <li><span><a href='#'>Something</a></span></li>
  <li><a href='#'>or Other</a></li>
</ul>

そしてCSS：

li a{ color: green; }
li>a{ color: red; }

の色はSomething緑のままですがor Other、赤になります

パート2、状況に適したルールを作成する必要があります。速度の差は非常に小さく、コードの作成に必要な余分な文字によって影が薄くなり、開発者が考えるのにかかる時間によって確実に影が薄くなると思います。それについて。

ただし、経験則として、ルールを具体的に指定するほど、CSSエンジンが適用するDOM要素をすばやく見つけることができるため、DOM検索を以前に短縮できる場合li>aよりも高速になると思います。li aまた、ネストされたアンカーがそのルールでスタイル設定されていないことも意味しますが、それはあなたが望むものですか？<~~はるかに適切な質問。

于 2012-06-27T13:31:59.917 に答える
9

ul > li > a直接の子のみを選択します。この場合、内の最初のレベル<a>の最初のレベルのみが選択されます。<li><ul>

ul li a一方、順序付けされていないリストのALL- <a>sでALL -sを選択します<li>

の例ul > li

ul > li.bg {
  background: red;
}
<ul>
  <li class="bg">affected</li>
  <li class="bg">affected</li>    
  <li>
    <ol>
      <li class="bg">NOT affected</li>
      <li class="bg">NOT affected</li>
    </ol>
  </li>
</ul>

使用している場合ul li-すべてのli-sが影響を受けます

更新このように、CSSセレクターの効率が高いものから低いものへの順序は次のようになります。

  • ID、例：#header
  • クラス、例えば.promo
  • タイプ、例えばdiv
  • 隣接する兄弟、例えばh2 + p
  • 子供、例えばli > ul
  • 子孫、例えばul a
  • ユニバーサル、すなわち*
  • 属性、例えば[type="text"]
  • 疑似クラス/要素、例：a:hover

したがって、より良い方法はchildren、単なるの代わりにセレクターを使用することdescendantです。ただし、通常のページ（数万の要素がない場合）での違いは、まったく無視できる場合があります。

于 2012-06-27T13:32:13.090 に答える
1

1）たとえばHTMLコード：

<ul>
    <li>
        <a href="#">firstlink</a>
        <span><a href="#">second link&lt;/a>
    </li>
</ul>

およびcssルール：

1) ul li a {color:red;} 
2) ul > li > a {color:blue;}

"> "-記号は、子セレクターのみを検索することを意味します（parentTag> childTag）

したがって、最初のcssルールはすべてのリンク（1番目と2番目）に適用され、2番目のルールは最初のリンクにanlyに適用されます

2）効率に関しては、JavaScriptセレクターの場合と同様に、2番目の方が速いと思います。このルールは右から左に読み取られます。つまり、ルールがブラウザで解析されると、ページ上のすべてのリンクが取得されます。-最初の場合、ページ上の各リンクのすべての親要素が検索され、親タグ「ul」が存在するすべてのリンクがフィルタリングされます。 "と"li"-2番目のケースでは、リンクの親ノードのみが" li "タグであるかどうかをチェックし、->"li"の親タグが"ul"であるかどうかをチェックします

このようなもの。私があなたのためにすべてを適切に説明することを願っています

于 2012-06-27T13:45:02.117 に答える
1

ここ> aでルートの色を指定しますli.active.menu-item

＃primary-menu> li.active.menu-item> a

#primary-menu>li.active.menu-item>a {
  color: #c19b66;
}
<ul id="primary-menu">
  <li class="active menu-item"><a>Coffee</a>
    <ul id="sub-menu">
      <li class="active menu-item"><a>aaa</a></li>
      <li class="menu-item"><a>bbb</a></li>
      <li class="menu-item"><a>ccc</a></li>
    </ul>
  </li>

  <li class="menu-item"><a>Tea</a></li>
  <li class="menu-item"><a>Coca Cola</a></li>
</ul>

于 2019-07-02T09:38:52.707 に答える
0

2番目の質問（パフォーマンスに影響があります）に答えるには、これらのセレクターを単一の（ネストされていない）ulで使用している場合：

<ul>
    <li>jjj</li>
    <li>jjj</li>    
    <li>jjj</li>
</ul>

子セレクターul > liは、より具体的であるためよりもパフォーマンスがul li高くなります。ブラウザはdomを「右から左」にトラバースするため、それが見つかると、子セレクタの場合は親としてlianyを探しますが、domツリー全体をトラバースして祖先を見つける必要があります。子孫セレクターulul

于 2012-06-27T13:44:28.417 に答える