Есть ли библиотека JS, которая упорядочивает тексты селектора CSS в соответствии со спецификой?

Question

Можно создать дубликат:
Sorting a set of CSS selectors on the basis of specificity

мне нужна библиотека JS, что заказать тексты селекторов CSS из наиболее специфичного текста селектора в менее конкретный текст селектора, где указана специфичность согласно W3C

Если нет библиотек, могу ли я написать его довольно просто с помощью JS или jQuery?

Текст селектора CSS может быть div#body .text.

Answer 1

В комментариях к вашему вопросу, josh3736 ссылки the W3C specification for determining specificity. Если вы склонны сами писать такую ​​библиотеку (которую я бы рекомендовал, если бы не по какой-либо другой причине, кроме как узнать больше об этом), их метод кажется хорошей ссылкой.

Специфичность селектора вычисляется следующим образом:

• количество 1, если декларация от это «стиль» атрибут, а не правило с селектором, 0 в противном случае (= а) (в HTML , значения атрибута стиля «style» являются правилами таблицы стилей. Эти правила не имеют селекторов, поэтому a = 1, b = 0, c = 0 и d = 0.)
• подсчитывает количество атрибутов идентификатора в селектор (= b)
• подсчитывает количество других атрибутов и псевдоклассов в селекторе (= c)
• подсчитать количество имен элементов и псевдо-элементов в селекторе (= D)

Специфичность основывается только на форме селектора. В частности, селектор формы «[id = p33]» засчитывается как селектор атрибутов (a = 0, b = 0, c = 1, d = 0), даже если атрибут id определен как «ID "в DTD исходного документа.

Приведение в соответствие четырех чисел a-b-c-d (в системе с большим основанием) дает специфику.

Answer 2

Полагаю, что я бы это ударил. Не стесняйтесь использовать, модифицируйте (или исправьте) этот код по своему усмотрению. Я не могу обещать, что это правильно, но примеры, которые они дают по спецификации 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); });