如何选择不包含类的元素

Question

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

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

这不起作用。还有其他想法吗？

Answer 1

检查语法

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

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

处理多个课程

此外，如果您希望包含多个类，则可能需要考虑使用包含选择器*=，因为之前的方法仅在第一个类属性以＆＃34; border-radius＆＃开头时才有效34; ：

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

<强>实施例

这是一个展示使用^=选择器开始的示例。

＆＃13;

＆＃13;

input { margin: 10px}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

input { margin: 10px}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

请尝试使用input:not([class^="border-radius"])。属性选择器写在方括号[]内。

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

<input type="text">
<input type="text" class='border-radius'>
<input type="text" class='border-radius-something'>

Answer 3

您需要将选择器更新为：

input:not(.border-radius)

Answer 4

在javascript中试试这个

this.el.on('click', 'ul.pagination li:not(.disabled,.active)', function ....