2

CSS のブラウザー セレクターの速度に関する情報を持っている人はいますか? つまり、異なるセレクターが (同じブラウザーで) 互いにどのように比較されるかを示します。

たとえば、次のようなコードをよく見かけます (そして書きます)。

#content #elem { ...rules... }

しかし、これらの要素は一意の ID であるため、必要なのは だけ#elemですよね? これにより、ブラウザーがより複雑なセレクターを持っている方が速いのではないかと考えました。私の考えでは、ブラウザーはその要素だけを見つけ#contentて、他の場所ではなく、その要素だけを見ることを知っているかもしれません。

別の例はtable tr td .classvsかもしれませんtable .class

4

6 に答える 6

3

クイック検索の後に得た情報を次に示します。

于 2009-03-06T02:54:16.543 に答える
2

Mozillaのガイドラインは興味深いかもしれません。

于 2009-03-06T18:38:58.660 に答える
2

速度に違いがある可能性がありますが、通常の使用例では認識できません。CSS をそのように記述する本当の理由は、具体性です。それはあなたが持っている場合です

#content #elem {color: black;}

と

#elem {color: red;}

より具体的なルールであるため、要素は黒色にする必要があります。

于 2009-03-06T01:45:23.400 に答える
2

正直なところ、あなたが話している時間はごくわずかなので、実際には違いはないと思います.

より具体的なセレクターを使用するという点では、これはいくつかの理由から良い方法だと思います。

  1. コードの可読性が向上します。HTML に対してセレクターが適用されている場所が一目でわかります。
  2. これにより、セレクターが別の場所で上書きされる可能性が低くなります。これは、発生する可能性が非常に低い、さらに詳細なセレクターが書き込まれるためです。

jQueryなどのJavaScriptライブラリを使用すると、ドキュメント全体を自分で解析する必要があるため、あなたが話していることは違いを生む可能性がありますが、私自身は速度の違いに気づいたことはありません.

于 2009-03-06T01:45:37.020 に答える
2

賢明な人ではありませんが、その質問を書くのにかかった時間は、おそらくあなたのサイトにアクセスするすべてのユーザーのすべての時間節約の合計を超えています (#id #id2 対 #id2 に関して)。この回答を書く時間もそうです....

あなたは今私に投票するかもしれません:)

于 2009-03-06T02:44:00.733 に答える
1

  1. 効率性と可読性の間には、常にいくつかの選択肢があります。もちろん、最も読みやすいですが、非常に非効率的で単純化することができます..の有無にかかわらず（有効table tr td .classなマークアップを想定して）どこかで見たことがありますか？少なくとも、次のような冗長部分にコメントできます。trtabletdtr

    /* table tr */ td .class {
    color: #ccf;
}

  2. 他の人が言ったように、追加の特異性が必要な場合があります。たとえば#elem、特定のコンテキスト以外ではどこでも赤くする必要があります#content。

    #elem {
    /* usually red */
    color: red;
}

#content #elem {
    /* except when in specific context */
    color: black;
}
于 2012-09-27T08:32:59.153 に答える