6

次のシナリオでは、効率的なアルゴリズムはどうなるのだろうかと思っていました。

解析されたcssルールのセットが与えられます。

     p.pStyle{margin-bottom:20px;font-family:Arial;}
     p{font-family:Verdana;}
     p.anotherPStyle{margin-bottom:10px;}

cssスタイルシートから、いくつかのルールセットが特定の要素に適用される可能性があります（<p class="pStyle anotherPStyle">hello</p>私のドキュメントではaと言います）。

最初にスタイルシートのどのルールが特定の要素に適用されるかを決定する必要があります（つまり、ここではp, pStyle and anotherPStyle）。次に、適用可能なルールを特定性（最も具体的なものから最も一般的なものへ）で並べ替えることができるコンパレータを作成します。注：ソートされたルールを適用するアルゴリズムはすでに設計されているため、その問題を効率的に解決する必要はありません。

私はいくつかのアイデア、つまり、特定のルールが固有であるDOMツリーのレベルを決定することを含むアイデアをいじっています...これが正しい方法かどうかはわかりませんが？

ブラウザエンジンはこれをどのように効率的に実行しますか？私はそれをJavaで複製したいと思っていますが、他の多くの言語に慣れているので、提供できるコードはどれでも大歓迎です。

ありがとう

4

1 に答える 1

10

それは特異性によって決定されます。この場合、どちらも同じように特定されているため、ファイルの最後にある宣言が優先されます。

特異度の計算

特異性は、セレクターのさまざまな部分をランク付けすることによって計算されます。

最も具体的なものから最も低いものへのランク付け：

  1. スタイル属性-ルールがスタイル属性で見つかった場合、このランクは1になります。
  2. ID-セレクターで見つかったIDごとに、このランクはさらに1を取得します。
  3. クラス、疑似クラス、属性セレクター-セレクターで見つかったものごとに、このランクはさらに1を取得します。
  4. 要素-セレクターで見つかった要素ごとに、このランクはさらに1を取得します。

ここrank n > rank n+1で、各ランクのポイント数に関係なく。

例

ul#nav li.active a

ポイントは次のとおりです。

  1. 0-スタイル属性ではありません。
  2. 1〜1個のIDが見つかりました。
  3. 1-1クラス名が見つかりました。
  4. 3〜3個の要素が見つかりました。

したがって、そのセレクターの各プロパティの特異性の値は[0,0,1,1,3]（1分でその余分なゼロに到達します）です。その値は、たとえばIDがない限り、どのセレクターよりも具体的です。

比較アルゴリズム：

  1. ランクを左から右に移動します。
  2. 両方のセレクターのランクを比較します。
  3. ポイントの多いランクが勝ちです。
  4. ランクが等しい場合は、次の（具体性の低い）ランクに進みます。
  5. すべてのランクが等しい場合は、CSSドキュメントの後半にあるランクが優先されます。

より重要な注意事項：

  • ユニバーサルセレクターには特異性の値がありません（ 0,0,0,0 (*)）疑似要素（例:first-line）0,0,0,1は、
    0,0,1,0
  • 疑似クラス:not()は、それ自体では特異性を追加せず、括弧内にあるものだけを追加します。
  • ディレクティブは単一の宣言!importantに適用でき、他の何よりも具体的な「0番目」のランクにポイントを追加し ます。したがって、上記の例では、ルールを追加すると、そのルール の特異性の値がにのみ増加し、 。 がない他のルールよりもすぐに勝ちます。
    !important
    [1,0,1,1,2]
    !important

追加のリファレンス

このテーマに関するこの素晴らしい記事を参照してください

どのスタイルがどの要素に行くかを決定する方法

ブラウザーがそれを行う方法は、セレクターを右から左に移動し、要素が移動するときにDOMから要素をフィルター処理することです。

前の例に戻ります。

    ul#nav li.active a

ブラウザは次のことを行います。

  1. 要素を取りaます。
  2. li次に、クラスを持つ要素である祖先があるかどうかを確認します.active（これは子孫コンビネータを介して行われます:) ancestor descendant。
  3. ここで、IDがのより高い祖先があるかどうかを確認します（ここでも、子孫コンビネータが使用されます）。ul#nav

特定の要素についてこれらすべての条件が満たされている場合、スタイルがその要素に適用されます。

あなたはそれを読むことができます：

クラスが、である祖先を持つa要素を選択します。これは、で あり、IDがである祖先もあります。
.activeli
#navul

どの要素がどのCSSスタイルを持っているかを正しく判断できるようにするには、完全に機能し、完全なDOMツリーが必要です。

于 2012-10-05T09:47:17.543 に答える