基于选择器特定性的顺序CSS [英] Order CSS based on Selector Specificity

问题描述

我已经将给定的CSS文件/字符串解析为JSON对象，如下所示：

  {
 header：{
color：＃000000
}，
#header h1：{
color：＃000
} ，
h1：{
color：＃4fb6e5
} 
} 
   
 
我现在想做的是根据Specificty重新排序。在这种情况下， #header h1 应该在JSON对象中的 h1 之后，在浏览器中应用。
 
 
 
我该如何做？有没有任何现有的图书馆？或任何有用的库来帮助这个？
 
 
 
我可以使用Javascript / jQuery或PHP来做到这一点。我正在寻找实现建议，希望这已经完成了！
解决方案
简答：
 
 
这是否有任何现有的库？
 
 
我知道这是为你的开箱即用。
 
 
或任何有用的图书馆帮助这个？
 
 
是，有  json_decode  和  uksort  ：
  $ specificity = function（$ selector）{
 
 / * 
 * @link http://www.w3.org/TR/selectors/#specificity 
 * 
 * 9.计算选择器的特异性
 * 
 *选择器的特异性计算如下：
 * 
 * *计算选择器中ID选择器的数量（= a）
 * *计算类选择器，属性选择器和
 *选择器中的伪类（= b）
 * *计算
 *选择器（= c）中类型选择器和伪元素的数量
 * *忽略通用选择器
 * 
 *否定伪类中的选择器与任何其他
 *一样计数，但是否定本身不计为伪类。 
 * 
 *连接三个数字a-b-c（在具有大
 *基数的数字系统中）给出特异性。 
 * / 
 ... 
 return（int）$ result; 
} 
 
 $ compare = function（$ a，$ b）use（$ specificity）{
 return $ specificity（$ a） -  $ specificity（$ b）
}; 
 
 $ array = json_decode（'{yours：json}'，true）; 
 
 uksort（$ array，$ compare）; 
 
 echo json_encode（（object）$ array）; 
  
正如此代码示例所示，它只解释了如何计算注释中的特异性，包含代码。这是因为我没有手头的代码，但我已经在那里的规范如何做（至少对于CSS 3）。
 
 
 
如果你'寻找一个CSS选择器解析器，我知道XDOM（因为我写它）。它在github上可用： https://github.com/hakre/XDOM   - 这是一个100％的CSS 3兼容的CSS选择器解析器。
 
 
 
就我所知，这是现成的解决方案。我知道的所有其他CSS选择器解析器与CSS 3标准完全不兼容，因为他们不遵循W3C规范。这可能对你有好处：如果你不需要严格的CSS3兼容性，你可能会找到一些适合你的需要的其他代码块。
 
I have parsed a given CSS file/string into a JSON object like so:
{
    "#header": {
        "color": "#000000"
    },
    "#header h1": {
        "color": "#000"
    },
    "h1": {
        "color": "#4fb6e5"
    }
}
What I want to do now is re-order them based on Specificty. In this case, the #header h1 should come after the h1 in the JSON object as this is how they'll be applied in the browser.

How can I do this? Are there any existing libraries for this? Or any useful libraries to help with this?

I can use both Javascript/jQuery or PHP to do this. I'm looking for implementation advice and hopefully this has already been done!
解决方案
Short answers:

  
Are there any existing libraries for this?
No, not one I'm aware of that does this "out-of-the-box" for you.

  
Or any useful libraries to help with this?
Yes, there is json_decode and uksort:
$specificity = function($selector) {

    /*
     * @link http://www.w3.org/TR/selectors/#specificity
     *
     * 9. Calculating a selector's specificity
     *
     * A selector's specificity is calculated as follows:
     * 
     *  * count the number of ID selectors in the selector (= a)
     *  * count the number of class selectors, attributes selectors, and 
     *    pseudo-classes in the selector (= b)
     *  * count the number of type selectors and pseudo-elements in the 
     *    selector (= c)
     *  * ignore the universal selector
     *
     * Selectors inside the negation pseudo-class are counted like any other, 
     * but the negation itself does not count as a pseudo-class.
     *
     * Concatenating the three numbers a-b-c (in a number system with a large 
     * base) gives the specificity.
     */
    ...
    return (int) $result;
}

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

$array = json_decode('{"yours" : "json"}', true);

uksort($array, $compare);

echo json_encode((object) $array);
As this code example shows, it only explains how to calculate the specificity in a comment and it does not contain the code. That's just because I don't have that code at hand, but I have put in there the specification how this is done (at least for CSS 3).

If you're looking for a CSS selector parser, I know about XDOM (because I wrote it). It's available on github: https://github.com/hakre/XDOM - It's a 100% CSS 3 compatible CSS selector parser.

To my best knowledge that is most of what you get as of today in terms of ready-made solutions. All other CSS selector parsers I know of are not compatible with the CSS 3 standard in full because they don't follow the W3C specification. Which might be good for you: If you don't need strict CSS3 compatbility, you might find some other code-chunks that suit your needs already.

                        
这篇关于基于选择器特定性的顺序CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！