使用css中没有函数的正则表达式

Question

有一种方法可以在css中使用正则表达式，而不是像这样:

*:not(.^col-) {
max-width: 100%;
}

的意思是应用于类以"col-"开头的元素以外的元素。那么如何使用css来实现呢?

注意:class属性可能包含其他类，如<a class="a-class b-class col-12">。

Answer 1

没有办法在CSS中使用正则表达式。但是，有一些方法可以选择属性开始/结束/包含特定字符串的元素。

在这种情况下，我相信您正在尝试选择其class不以col-开头的所有元素。你可以这样写:

*:not([class ^= "col-"]) {
max-width: 100%;
}

注意[class ^= "col-"]只匹配class属性以col-开头的情况，因此<element class="col-123 abc">将匹配但<element class="abc col-123">将不匹配。

因此，建议对所有元素使用一个相同的单独类。你可以用JavaScript:

// Note: This code isn't very efficient. Add the class manually whenever possible.
const tw = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, {
acceptNode(elem) {
if ([...elem.classList].some(c => c.startsWith("col-")))
return NodeFilter.FILTER_ACCEPT;
else
return NodeFilter.FILTER_SKIP;
}
});
while (tw.nextNode()) {
tw.currentNode.classList.add("col");
}

.col {
color: red;
}

<div class="abc col-12">Test div</div>
<div class="abc">Another test div</div>

Answer 2

首先，将.col类添加到您不想更改的内容中，然后转到CSS并更改代码。

*:not(.col) {
width: 100%;
}

<div class="col" style="background-color: red;">This is example</div>