否定伪类选择器(:not)

:not()伪类选择器排除匹配特定选择器的元素，实现反向选择功能。

基本语法

:not(selector) {
  /* 匹配不符合selector的元素 */
}

简单示例

/* 排除第一个元素 */
li:not(:first-child) {
  margin-top: 10px;
}

/* 排除特定类 */
button:not(.disabled) {
  cursor: pointer;
}

/* 排除特定属性 */
input:not([required]) {
  border-color: #ccc;
}

选择器参数

支持的选择器类型

复合选择器

/* 排除同时有两个类的元素 */
.item:not(.active.highlighted) {
  opacity: 0.5;
}

/* 排除具有特定属性的元素 */
input:not([type="checkbox"]) {
  width: 100%;
}

/* 排除特定状态的元素 */
a:not(:hover):not(:focus) {
  color: blue;
}

多参数语法（CSS4）

选择器列表

/* 排除多种元素 */
:not(h1, h2, h3) {
  font-size: 14px;
}

/* 等效于 */
:not(h1):not(h2):not(h3) {
  font-size: 14px;
}

/* 排除多个类 */
:not(.active, .disabled, .hidden) {
  display: block;
}

浏览器支持

权重计算

参数决定权重

/* :not()本身不增加权重 */
:not(.class) {
  /* 权重 = .class权重 = 0,0,1,0 */
}

:not(#id) {
  /* 权重 = #id权重 = 0,1,0,0 */
}

:not(div) {
  /* 权重 = div权重 = 0,0,0,1 */
}

多参数权重

:not(.class1, #id) {
  /* 取参数中最高权重: 0,1,0,0 */
}

实用场景

排除首尾元素

/* 列表项间距，排除第一个 */
li:not(:first-child) {
  margin-top: 8px;
}

/* 排除最后一个 */
li:not(:last-child) {
  border-bottom: 1px solid #eee;
}

/* 排除首尾两个 */
li:not(:first-child):not(:last-child) {
  background: #f5f5f5;
}

排除特定状态

/* 非禁用按钮可点击 */
button:not(:disabled) {
  cursor: pointer;
}

button:not(:disabled):hover {
  background: #0056b3;
}

/* 非空输入框 */
input:not(:placeholder-shown) {
  border-color: #28a745;
}

排除特定类型

/* 表单元素排除特定类型 */
input:not([type="radio"]):not([type="checkbox"]) {
  width: 100%;
  padding: 8px 12px;
}

/* 排除隐藏元素 */
:not([hidden]) {
  visibility: visible;
}

排除特定类组合

/* 导航项排除激活和禁用 */
.nav-item:not(.active):not(.disabled) {
  color: #666;
}

.nav-item:not(.active):not(.disabled):hover {
  color: #333;
}

与其他伪类配合

:not + :nth-child

/* 排除特定位置的元素 */
li:not(:nth-child(3n)) {
  background: white;
}

/* 前三个之外的元素 */
li:not(:nth-child(-n+3)) {
  opacity: 0.7;
}

:not + :empty

/* 非空段落 */
p:not(:empty) {
  margin-bottom: 16px;
}

/* 有内容的容器 */
.container:not(:empty) {
  border: 1px solid #ddd;
}

:not + 属性选择器

/* 没有href的链接 */
a:not([href]) {
  color: inherit;
  text-decoration: none;
}

/* 没有data属性的元素 */
[data-tooltip]:not([data-tooltip=""]) {
  cursor: help;
}

注意事项

不能嵌套:not

/* 无效语法 */
:not(:not(.class)) {
  /* 不支持 */
}

不能包含伪元素

/* 无效语法 */
:not(::before) {
  /* 伪元素不能作为参数 */
}

不能使用通配选择器

/* 无效（早期版本） */
:not(*) {
  /* 匹配无元素，无意义 */
}

/* CSS4允许，但无实际用途 */

兼容性处理

多参数降级

/* 现代浏览器 */
:not(.a, .b, .c) {
  color: red;
}

/* 兼容旧浏览器 */
:not(.a):not(.b):not(.c) {
  color: red;
}

实战示例

响应式导航

/* 非当前页的导航项 */
.nav-link:not(.current) {
  opacity: 0.8;
}

.nav-link:not(.current):hover {
  opacity: 1;
}

/* 非首页显示返回按钮 */
body:not(.home) .back-button {
  display: block;
}

表格样式

/* 非标题行的表格单元格 */
tr:not(:first-child) td {
  padding: 8px;
}

/* 非最后一列 */
td:not(:last-child) {
  border-right: 1px solid #eee;
}

/* 排除合计行 */
tr:not(.summary) td {
  font-weight: normal;
}

表单验证

/* 非必填字段 */
input:not([required]) {
  border-left: 3px solid #ccc;
}

/* 非验证通过的输入 */
input:not(:valid) {
  border-color: #dc3545;
}

/* 验证失败的必填项 */
input[required]:not(:valid) {
  background: #fff5f5;
}

:not vs :is对比

/* :not 排除匹配 */
li:not(.active) { }

/* :is 包含匹配 */
li:is(.active) { }

/* :is权重取最高参数 */
:is(.class, #id) { }  /* 权重: 0,1,0,0 */

/* :not权重同样取最高参数 */
:not(.class, #id) { } /* 权重: 0,1,0,0 */

要点总结

1. :not(selector)匹配不符合条件的元素
2. CSS4支持多参数列表:not(a, b, c)
3. 权重由参数选择器决定
4. 不能嵌套:not，不能包含伪元素
5. 常用场景：排除首尾、排除特定类/状态
6. 配合:nth-child、属性选择器增强灵活性
7. 多参数时使用链式写法兼容旧浏览器