基于特异性对一组CSS选择器进行排序 [英] Sorting a set of CSS selectors on the basis of specificity
问题描述
如何根据CSS特性在JS函数中对CSS选择器进行排序?
How can a set of CSS selectors be sorted on the basis of CSS specificity in a JS function?
function SortByCssSpecificity(input_array_of_css_selectors) {
...
return sorted_array_of_css_selectors;
}
推荐答案
http://www.w3.org/TR/selectors/#specificityrel =nofollow>选择器规格:
From the Selectors spec:
选择器的特异性计算如下:
A selector's specificity is calculated as follows:
- 计算选择器中ID选择器的数量(= a)
- 计数选择器中的类选择器,属性选择器和伪类的数量(= b)
- 计算类型选择器和伪元素的数量选择器(= c)
- 忽略通用选择器
- 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
类[:not()
]的计数方式与任何其他类型一样,但否定本身不计为伪类。
Selectors inside the negation pseudo-class [:not()
] are counted like any other, but the negation itself does not count as a pseudo-class.
连接三个数字abc(在一个具有大基数的数字系统中)给出了特殊性。
Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.
示例:
* /* a=0 b=0 c=0 -> specificity = 0 */
LI /* a=0 b=0 c=1 -> specificity = 1 */
UL LI /* a=0 b=0 c=2 -> specificity = 2 */
UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */
H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */
LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */
#x34y /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
你开始,它是无处接近完美,但我希望这是一个合理的起点:
Here's a pseudo-code implementation to get you started, it is nowhere near perfect but I hope it's a reasonable starting point:
function SortByCssSpecificity(selectors) {
simple_selectors = [][]
for selector in selectors {
simple_selectors[selector] = parse_selector(selector)
simple_selectors[selector] = simple_selectors[selector].filter(x | x != '*')
// This assumes pseudo-elements are denoted with double colons per CSS3
// A conforming implementation must interpret
// :first-line, :first-letter, :before and :after as pseudo-elements
a = simple_selectors[selector].filter(x | x ^= '#').length
b = simple_selectors[selector].filter(x | x ^= '.' or x.match(/^:[^:]+/) or x.match(/^\[.+\]$/)).length
c = simple_selectors[selector].length - (a + b)
simple_selectors[selector][count] = parseInt('' + a + b + c)
}
return simple_selectors.sort(x, y | x[count] < y[count])
}
function parse_selector(selector) {
simple_selectors = []
// Split by the group operator ','
// Split each selector group by combinators ' ', '+', '~', '>'
// :not() is a special case, do not include it as a pseudo-class
// For the selector div > p:not(.foo) ~ span.bar,
// sample output is ['div', 'p', '.foo', 'span', '.bar']
return simple_selectors
}
这篇关于基于特异性对一组CSS选择器进行排序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!