CSS特定性计数器

Question

因此CSS特定规则规定id是最强大的，然后是类，然后是标记名，然后是*。

所以#id>.class>div>*。

我想做的是，如果我提供一系列CSS选择器，那么每个选择器都会得到一个"评级"。

假设我有一个特定数组=[#id, .class, tagname]

span应返回[0, 0, 1]

body p应返回[0, 0, 2]

.red .orange应返回[0, 2, 0]

menu .item #checkout.active应返回[1, 2, 1]

我试过这个代码，但肯定有问题：

function compare(a) {
const comparisonOperators = ["#", ".", " "];
const aRating = [];
for (let x = 0; x < comparisonOperators.length; x++) {
aRating[x] = a.includes(comparisonOperators[x])
? a.split(comparisonOperators[x]).filter((x) => x).length
: 0;
}
console.log(aRating);
}
compare("menu .item #checkout.active");
// returns [2,3,3]

对此有什么想法吗？

Answer 1

我采用了与您不同的方法来解决此问题。

function compare(a) {
var items = a.split([' ']);
var aRating = [0,0,0];
items.forEach(function(i) {
//case 1
if(i.split('#').length > 1) {
aRating[0] = aRating[0] + (i.split('#').length - 1)
}
//case 2
if(i.split('.').length > 1) {
aRating[1] = aRating[1] + (i.split('.').length - 1)
}
//case 3
if(!i.startsWith('#') && !i.startsWith('.')) { 
aRating[2] = aRating[2] + 1
}

});
console.log(aRating);
}

最初，我是根据空白来分割字符串。这提供了要检查的元素的总数。然后，我循环遍历该数组中的每个项，以确定并计算选择器的数量。

在情况1中，如果项目包含ID，则其长度将大于1。例如，#myId。如果我基于#对其进行拆分，那么我将在一个数组中获得2个项目。我使用它来确定它是否包含ID。在这种情况下，这是真的，所以我将aRating数组增加1。如果它不是ID，那么它的长度将始终为1，因为它不能被分割。

对于cssclass，将相同的逻辑应用于情况2。

情况3略有不同。如果字符串不是以CCD_ 21或'.'开头，那么它必须是一个标记名。