css 页面中某些元素不想被选中怎么办_通过 not 排除选择器
:not()只接受简单选择器，排除多个类需链式书写；控制鼠标选中用user-select而非:not()或pointer-events，其值none/text/all/contain决定可选行为，且支持继承与子元素覆盖。
如何用 :not() 排除特定元素不被选中
直接用 :not() 伪类可以排除匹配的元素，但要注意它只接受「简单选择器」——不能写嵌套、不能写复合条件（比如 :not(.a .b) 或 :not(div p) 都非法）。
-
:not()内只能放一个类名、ID、属性选择器、伪类（如:hover），或它们的组合（如:not([disabled]):not(:checked)） - 想排除多个不同类的元素，得链式写：
:not(.skip):not(.ignore):not([data-no-select]) - 不能用来排除子元素行为，比如想让「按钮内的文字不可选」，
button:not(span) { user-select: none; }没有意义——这不会影响span的可选性，得单独设button span { user-selec
t: none; }
user-select: none 才是控制「是否可被鼠标选中」的正解
:not() 只负责筛选哪些元素进入样式作用范围，真正决定「能否被鼠标划选」的是 user-select CSS 属性。常见取值：
-
none：完全不可选（包括其子元素，除非子元素显式设为text或auto） -
text：仅文本可选（默认值，多数元素继承自body） -
all：整个元素内容一次性全选（适合标签、代码片段） -
contain：仅选中该元素内部，不跨出边界（较新，[Chrome 120+ / Firefox 122+ 支持](https://caniuse.com/user-select)）
所以典型做法是：先用 :not() 定义「要设置 user-select: none 的范围」，再统一加属性：
div.content :not(.selectable):not(code):not(pre) {
user-select: none;
}
容易踩的坑：嵌套结构下 user-select 的继承与覆盖
user-select 是可继承属性，但子元素能用自己的声明覆盖父级。这意味着：
- 如果父容器设了
user-select: none，子元素写user-select: text就能恢复可选 - 但反过来不行：父设
text，子设none有效；父设none，子设all也有效 - 注意
、等表单控件默认忽略user-select，它们的可选行为由浏览器控制，CSS 无法强制禁用（出于可访问性考虑）
例如下面这段 HTML：
卡片标题
这段仍可选
替代方案：用 pointer-events: none 不等于禁用选择
有人误以为 pointer-events: none 能阻止选中，其实它只是让元素不响应鼠标事件（点击、hover），但不影响文本选中行为。用户依然可以拖拽越过该元素选中其后的文本。
- 若目标是「视觉上存在但完全不参与交互」，才用
pointer-events: none - 若目标是「防止内容被意外复制」，必须用
user-select: none - 两者可共存，但目的不同：
user-select: none; pointer-events: none;是彻底「隐身交互」，但会损害可访问性（屏幕阅读器可能跳过）
真正需要禁选时，别绕弯——盯死 user-select，用 :not() 控制作用范围，其余都是干扰项。
