CSS选择器不支持if-else或布尔逻辑运算，仅通过静态解析结构、属性、状态等DOM特征实现“条件匹配”；可用:is()/:where()模拟“或”，属性与伪类组合逼近“且”，但无法实现三元操作或子元素存在性判断。
css选择器本身不支持if-else或布尔逻辑运算
CSS 选择器不是编程语言，没有 if、and、or、not 这类运行时逻辑判断能力。所谓“条件匹配”，实际是靠浏览器对选择器语法的静态解析规则来实现的——它只认结构、属性、状态、位置等可枚举的 DOM 特征，不执行表达式求值。
但你可以用组合方式逼近某些条件效果，关键在于理解哪些组合是浏览器原生支持的，哪些只是“看起来像”逻辑：
-
:is()和:where()是“或”关系（匹配任意一个子选择器），但不是运行时判断，而是预编译合并 -
:not()只接受简单选择器（如:not(.disabled)合法，:not(.a.b)在旧版中不合法，CSS Selectors Level 4 才支持复合） - 相邻兄弟选择器
+、通用兄弟选择器~、子选择器>看似“条件触发”，实则是基于 DOM 树固定关系的硬匹配
:is() 和 :where() 怎么模拟“或”逻辑
这两个函数让你把多个选择器写成一组，避免重复声明。例如想让 button 和 a.btn 都有统一 hover 样式：
/* 等价于 button:hover, a.btn:hover */
:is(button, a.btn):hover {
color: blue;
}区别在于：:where() 的权重要始终为 0，适合覆盖第三方样式；:is() 的权重取组内最高者（比如 :is(.foo, div#bar) 权重按 div#bar 计算）。别指望它们能嵌套判断，比如 :is(:not(.hidden) .item) 是无效语法——:not() 不能出现在 :is() 内部作为复杂条件。
立即学习“前端免费学习笔记（深入）”；
用属性选择器 + 伪类逼近“且”关系
真正接近“且”的写法，是连续使用多个可叠加的特征描述：
-
[data-status="active"][data-role="primary"]→ 同时满足两个属性 -
input:invalid:required→ 同时处于 invalid 状态且是 required 字段 -
button:not(:disabled):hover→ 不被禁用 + 鼠标悬停（注意顺序无关，但:not()必须写在前面才符合规范习惯）
这种写法有效，是因为每个伪类/属性选择器都独立作用于同一个元素，浏览器做的是“全部满足”判定，而非逻辑表达式求值。一旦涉及父级状态（比如“当父元素有 .dark 模式时，子元素变白”），就必须靠祖先选择器（如 .dark .text）或 CSS 自定义属性配合 var(--color)，无法用选择器直接“读取”父级 class 变化并动态切换逻辑分支。
为什么不能用选择器实现“三元操作”或“存在性判断”
常见误区是想写类似 div.has-image ? .image : .placeholder 的选择器。CSS 没有“查询子元素是否存在”的能力。你无法写出“如果 div 下有 img，则应用 A 样式；否则应用 B 样式”的纯选择器方案。可行的替代路径只有：
- 服务端或 JS 预判并打上不同 class（如
div[data-has-img]） - 用
:has()（仅 Chromium 105+、Safari 15.4+ 支持，Firefox 仍 behind flag）——但它只能用于后代/兄弟关系判断，且不能在所有上下文中使用（比如不能在@keyframes或某些伪元素中） - 放弃纯 CSS，改用
aspect-ratio、object-fit、background-image等视觉兜底方案掩盖差异
真正容易被忽略的是兼容性断层：:has() 在部分邮件客户端、旧版 WebView、甚至某些 Electron 版本中完全不可用；而依赖 :is() 的项目若需支持 Safari 13.1 以下，就得手动展开——这些不是“能不能写出来”的问题，而是“写了等于没写”的现实约束。
