css - 如何选择不包含类的元素

Question

我正在尝试为所有不包含以“border-radius”开头的类的输入元素设置样式:

input:not(class^="border-radius") {

这是行不通的。还有其他想法吗？

Answer 1

检查语法

确保您的类属性选择器包含在方括号内以避免任何语法问题。

input:not([class^="border-radius"]) {
   /* Your style here */
}

处理多个类

此外，如果您希望包含多个类，您可能需要考虑使用包含选择器 *= 而不是因为以前的方法仅在第一个类属性以“border-radius”开头时才有效“:

input:not([class*="border-radius"]) {
   /* Your style here */
}

示例

这是一个演示 starts-with ^= 选择器的示例。

input { margin: 10px}

input:not([class^="border-radius"]) {
  background: yellow;
}

<input class='border-radius' />
<input class='normal' />
<input class='test border-radius' />
<input class='another-normal' />
<input class='border-radius-5' />

这是一个演示包含 *= 选择器的示例。

input { margin: 10px}

input:not([class*="border-radius"]) {
  background: yellow;
}

<input class='border-radius' />
<input class='normal' />
<input class='test border-radius' />
<input class='another-normal' />
<input class='border-radius-5' />