如何根据 JS 函数中的 CSS 特性对一组 CSS 选择器进行排序?
function SortByCssSpecificity(input_array_of_css_selectors) {
...
return sorted_array_of_css_selectors;
}
如何根据 JS 函数中的 CSS 特性对一组 CSS 选择器进行排序?
function SortByCssSpecificity(input_array_of_css_selectors) {
...
return sorted_array_of_css_selectors;
}
选择器的特异性计算如下:
- 计算选择器中 ID 选择器的数量 (= a)
- 统计选择器中的类选择器、属性选择器和伪类的数量(= b)
- 计算选择器中类型选择器和伪元素的数量 (= c)
- 忽略通用选择器
否定伪类 [
:not()
] 中的选择器与其他选择器一样计数,但否定本身不计为伪类。连接三个数字 abc(在具有大基数的数字系统中)给出了特异性。
例子:
* /* 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 */
(选择器级别 4,在此答案之后发布,由于引入了一些当前超出此答案范围的新选择器,因此为特异性增加了另一层复杂性。)
这是一个让您入门的伪代码实现,它远非完美,但我希望这是一个合理的起点:
function SortByCssSpecificity(selectors, element) {
simple_selectors = [][]
for selector in selectors {
// Optionally pass an element to only include selectors that match
// The implementation of MatchSelector() is outside the scope
// of this answer, but client-side JS can use Element#matches()
// https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
if (element && !MatchSelector(selector, element)) {
continue
}
simple_selectors[selector] = ParseSelector(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 ParseSelector(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
}