1

重複の可能性:
特定性に基づいて一連の CSS セレクターをソートする

CSS セレクター テキストを最も具体的なセレクター テキストからあまり具体的でないセレクター テキストに並べ替える JS ライブラリが必要です。具体性はW3Cに従って指定されます。

そこにライブラリがない場合、JS または jQuery を使用して非常に簡単に記述できますか?

CSS セレクターのテキストはdiv#body .text.

4

2 に答える 2

1

あなたの質問へのコメントで、josh3736 は特定性を決定するための W3C 仕様にリンクしています。そのようなライブラリを自分で書きたいと思った場合 (それについてもっと学ぶ以外の理由がなければ、私はそれをお勧めします)、彼らの方法は良いリファレンスのようです。

セレクターの特異性は次のように計算されます。

  • 宣言がセレクタ付きのルールではなく 'style' 属性である場合は 1、それ以外の場合は 0 (= a) (HTML では、要素の「スタイル」属性の値はスタイル シートのルールです。これらのルールにはセレクタがありません。つまり、a=1、b=0、c=0、d=0 です。)
  • セレクター内の ID 属性の数をカウントする (= b)
  • セレクター内の他の属性と疑似クラスの数をカウントします (= c)
  • セレクター内の要素名と疑似要素の数を数える (= d)

特異性は、セレクターの形式のみに基づいています。特に、"[id=p33]" という形式のセレクターは、id 属性が "ID " ソース ドキュメントの DTD 内。

4 つの数 abcd を (基数が大きい数体系で) 連結すると、特異性が得られます。

于 2012-06-24T21:55:03.327 に答える
1

私はこれを刺すと思いました。必要に応じて、このコードを自由に使用、変更 (または修正) してください。それが正しいとは約束できませんが、w3c 仕様で提供されている例はすべて同じ結果を生成します。

function specificity(selector, isStyleAttribute) {

    selector = selector || "";
    function numMatches(regex) {
        return (selector.match(regex)||[]).length;
    }

    var numClasses = numMatches(/\.[\w-_]+\b/g);
    var numIds = numMatches(/#[\w-_]+\b/g);
    var numNamesInBraces = 0;
    var namesInBraces = selector.match(/\[[^\]]*\b[\w-_]+\b[^\]]*\]/g) || [];
    for (var idx = 0; idx < namesInBraces.length; ++idx) {
        numNamesInBraces += (namesInBraces[idx].match(/\b[\w-_]+\b/g)||[]).length;
    }

    var results = [0,0,0,0];
    results[0] = isStyleAttribute ? 1 : 0;
    results[1] = numIds;
    results[2] = numMatches(/\[[^\]]+\]/g) + numClasses;
    results[3] = numMatches(/\b[\w-_]+\b/g) - numIds - numClasses - numNamesInBraces;
    return results.join(',');

}

配列を並べ替えたい場合は、次のように使用できます。

selectors.sort(function(a,b) { return specificity(a) > specificity(b); });
于 2012-06-24T23:04:51.200 に答える