如何选择容器内除特定元素外的所有元素？:not选择器失效解决方案

DevOps 小满

2026-5-26

选择容器内除指定元素外所有元素的正确方法

嘿，我一眼就看到问题出在哪啦！你的CSS语法写错了，这才导致:not()伪类没生效～

你的错误点

你写的代码里把:not()的顺序搞反了，写成了not:(.test2)，而且.container和伪类之间缺少空格——正确的写法应该是.container :not(.test2)：注意冒号要在not前面，同时容器选择器和伪类之间的空格是关键，它表示选择容器内部的所有子元素，再排除掉带.test2类的元素。

正确实现代码

/* 选择.container下所有非.test2的元素 */
.container :not(.test2) {
  color: red;
}

搭配你的HTML结构，完整可运行的代码如下：

<div class='container'>
  <p class='test'>test</p>
  <p class='test'>test</p>
  <p class='test'>test</p>
  <p class='test'>test</p>
  <p class='test2'>test 2</p>
</div>

<style>
.container :not(.test2) {
  color: red;
}
</style>

额外实用技巧

仅选择直接子元素：如果你只想选中.container的直接子元素（不包含深层后代），可以加上子选择器>：
```
.container > :not(.test2) {
  color: red;
}
```
排除多个元素：如果需要排除多个类的元素，可以链式使用:not()：
```
.container :not(.test2):not(.test3) {
  color: red;
}
```