php – 按CSS特性排序

发布时间:2022-04-30 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了php – 按CSS特性排序脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
我的主要目标是尝试根据特异性重新排序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)
    };

这看起来如何,如何确定在这种情况下给出的点数!?

如果序列化,问题应该消失
html,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>

脚本宝典总结

以上是脚本宝典为你收集整理的php – 按CSS特性排序全部内容,希望文章能够帮你解决php – 按CSS特性排序所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。