Question

我的主要目标是尝试根据特异性重新排序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, body div{ // 4 points
    background: transparent;
}

但是，这不是浏览器应用CSS的方式。

我认为我的特异性功能可能缺少CSS顺序的重要性而不是基于选择器特异性的排序？这是真的吗？

更新

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

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

这看起来如何以及如何确定在这种情况下要提供的点数？？

Answer 1

如果序列化

，问题就会消失

html, body, 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 blue，否则最后一条规则将先于rendering in red：

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

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

按CSS特性排序

更新

1 个答案: