我的主要目标是尝试根据特异性重新排序CSS样式块.我以前从
SO起帮助过,我设法产生了这个功能.
See 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 div{ // 4 points
background: transparent;
}
但是,这不是浏览器应用CSS的方式.
我认为我的特异性功能可能缺少CSS顺序的重要性而不是基于选择器特异性的排序？这是真的？
更新
我认为我应该做的是在我的比较函数中,我应该总是添加额外的10分,因为特异性不仅仅基于选择器,它也基于选择器的顺序.所以这样的事情：
$compare = function($a,$b) use ($specificity) {
return ($specificity($a) + 10) - $specificity($b)
};
这看起来如何,如何确定在这种情况下给出的点数！？
如果序列化,问题应该消失
原文链接：https://www.f2er.com/php/137393.htmlhtml,body div{
background: transparent;
}
作为单独的规则,就好像它们是以下列方式编写的：
html{
background: transparent;
}
body{
background: transparent;
}
body div{
background: transparent;
}
The semantics is a bit confusing,但基本上你是根据已经合并到同一规则集中的独立选择器来判断整个声明.
重新更新：specificity is not affected by selector order,即下面的规则具有相同的特异性.除非您重新安排规则rendering in red,否则最后一条规则将在rendering in blue之前开始：
<style>
#container span {color:red;}
div #content {color:blue;}
</style>
<div id="container"><span id="content">Hello world!</span></div>
