Порядок по CSS Специфика

Моя основная цель – попытаться изменить порядок стиля CSS на основе специфики. Я ранее помогал от SO, и мне удалось создать эту функцию. См. Gist .

Вот пример:

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, а не упорядочивать на основе специфики селектора? Это правда?

Обновить

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

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

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

Solutions Collecting From Web of "Порядок по CSS Специфика"

Проблема должна исчезнуть, если вы выполните сериализацию

 html, body, body div{ background: transparent; }

как отдельные правила, как если бы они были написаны следующим образом:

 html{ background: transparent; } body{ background: transparent; } body div{ background: transparent; }

Семантика немного запутанна , но в основном вы оцениваете всю декларацию на основе независимых селекторов, которые были объединены в один и тот же набор правил.

Повторите свое обновление: специфичность не зависит от порядка выбора , т. Е. Приведенные ниже правила имеют одинаковую специфичность. Последнее правило будет иметь приоритет рендеринга в синем цвете , если вы не переустановите рендеринг правил красным цветом :

 <style> #container span {color:red;} div #content {color:blue;} </style> <div id="container"><span id="content">Hello world!</span></div>