CSS 中如何使用 `:not` 选择器定义样式
在 CSS 中，`:not` 是一个非常实用且强大的伪类选择器。它允许开发者排除特定的元素或属性，从而实现更精细的选择和样式控制。本文将详细介绍如何使用 `:not` 选择器，并通过实例帮助你更好地理解和应用它。
什么是 `:not` 选择器？
`:not` 选择器的基本语法如下：
```css
:not(selector) {
/ 样式规则 /
}
```
`:not` 的作用是匹配所有不符合指定条件的元素。例如，如果你想为除某个特定元素之外的所有元素设置样式，就可以使用 `:not`。
基本用法示例
假设我们有以下 HTML 结构：
```html
这是一个 span 元素。
```
如果我们想为所有非 `` 元素设置背景颜色，可以这样写：
```css
:not(span) {
background-color: lightgray;
}
```
上述代码会将容器中的 `这是另一个 div 元素。
` 和 `
` 元素的背景色设为浅灰色，而 `` 元素则不受影响。
更复杂的组合
`:not` 不仅可以单独使用，还可以与其他选择器结合，以实现更复杂的功能。例如，如果你想让所有的链接（``）除了外部链接（`href` 属性值以 "http://" 开头）都显示红色，可以这样做：
```css
a:not([href^="http://"]) {
color: red;
}
```
这里 `[href^="http://"]` 表示选择所有 `href` 属性值以 "http://" 开头的链接，而 `:not()` 则排除了这些链接，只对其他链接应用样式。
实际应用场景
1. 排除特定子元素
在某些情况下，你可能希望对父级容器内的所有子元素应用样式，但排除某些特定的子元素。例如：
```html
- 列表项 1
- 列表项 2
- 列表项 3
