Упорядочение по специфике CSS

Моя основная цель — попытаться переупорядочить блок стилей CSS на основе специфики. Ранее я помогал SO, и мне удалось создать эту функцию.См. суть

Вот пример:

function specificity($selector){
// https://gist.github.com/2774085
}

$compare = function($a, $b) use ($specificity) {
    return $specificity($a) - $specificity($b)
};

$array = css_array();

uksort($array, $compare);

Вышеприведенное работало отлично, пока я не наткнулся на этот CSS:

html, body, body div{
    background: transparent;
}
body {
    background-color: #D96F02;
}

Это переупорядочивается в это:

body { // 1 point
    background-color: #D96F02;
}
html, body, body div{ // 4 points
    background: transparent;
}

Однако это не 'не то, как браузер применяет CSS.

Я думаю, что моя функция специфичности может не учитывать важность порядка CSS, а не порядка, основанного на специфичности селектора? Это правда?

Обновление

Я думаю, что я должен do находится в моей функции сравнения, я всегда должен добавлять дополнительные точки, скажем, 10, потому что специфичность основана не только на селекторах, но и на порядке селектора.Так что-то вроде этого:

 $compare = function($a, $b) use ($specificity) {
        return ($specificity($a) + 10) - $specificity($b)
    };

Как это выглядит и как в этом случае определить количество очков!?

8
задан Community 23 May 2017 в 12:27
поделиться