按 CSS 特异性排序

我的主要目标是尝试根据特殊性重新排序 CSS 样式块。我之前曾帮助过SO https://stackoverflow.com/questions/10636340/order-css-based-on-selector-specificity我成功地实现了这个功能。See gist https://gist.github.com/2774085.

这是一个例子：

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 顺序的重要性，而不是基于选择器特异性的排序？这是真的？

Update

我认为我应该做的是在我的比较函数中，我应该总是添加一个额外的点10因为特异性不仅仅基于选择器，它还基于选择器的顺序。所以像这样：

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

这看起来怎么样？在这种情况下我如何确定要给出的分数！？

如果您序列化，问题就会消失

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

作为单独的规则，就好像它们是按以下方式编写的：

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

语义有点混乱 http://www.w3.org/TR/CSS2/syndata.html#rule-sets，但基本上您是根据已组合到同一规则集中的独立选择器来判断整个声明。

回复您的更新：特异性不受选择器顺序的影响 http://www.w3.org/TR/CSS21/cascade.html#specificity，即下面的规则具有相同的特殊性。最后一条规则优先渲染为蓝色 http://jsfiddle.net/ovfiddle/Cphhq/，除非你重新安排规则渲染为红色 http://jsfiddle.net/ovfiddle/Cphhq/1/:

<style>
    #container span {color:red;}
    div #content {color:blue;}
</style>

<div id="container"><span id="content">Hello world!</span></div>