时间戳

首页 > 解决方案 > 在css中使用不带函数的正则表达式

css - 在css中使用不带函数的正则表达式

问题描述

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

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

我的意思是应用于元素，除了那些以“col-”开头的类。那我怎么能用css做到这一点？

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

标签： css

解决方案

没有办法在 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>

推荐阅读