正文：
作为前端开发者，你可能经常遇到这样的场景：需要同时满足多个条件才能应用样式，或者只需满足任一条件即可触发样式规则。这种逻辑控制在编程语言中通常通过AND/OR运算符实现，但CSS选择器原生并不支持这类逻辑运算符。别担心，本文将带你解锁CSS实现逻辑运算的实战技巧。

一、AND逻辑的替代方案

当需要同时满足多个条件时（相当于AND），CSS提供了两种核心方案：

1. 链式组合选择器

通过连续书写选择器实现交集效果，这是最经典的AND逻辑实现方式：html

css /* 同时具备active和admin类 */ .user.active.admin { background-color: gold; border: 2px solid firebrick; }
这种写法要求元素同时满足所有选择器条件，相当于AND逻辑运算。但需注意选择器顺序不影响匹配结果，以下写法效果相同：
css .active.user.admin { /* 效果一致 */ }

2. :has()伪类实现父级AND控制

CSS4引入的:has()伪类允许根据子元素状态控制父元素样式，实现跨层级的AND逻辑：html

css /* 当card包含icon-alert元素时触发 */ .card:has(.icon-alert) { border-left: 3px solid #ff6b6b; background: #fff9f9; }
此方案特别适合组件库开发，无需修改父元素类名即可实现状态联动。但需注意截至2023年:has()的浏览器兼容性（Firefox需108+版本）。

二、OR逻辑的替代方案

实现任一条件满足即触发的效果（相当于OR），CSS提供了更丰富的解决方案：

1. 逗号分隔选择器组

最基础的OR实现方式，通过逗号分隔多个独立选择器：
css /* 满足任一条件即应用样式 */ button.primary, button.danger, button.success { padding: 12px 24px; font-weight: 600; }

2. :is()伪类优化代码结构

CSS3的:is()伪类可显著简化OR逻辑的书写，特别适合处理带相同前缀的选择器组：css
/* 传统写法 */
.section .title,
.article .title,
.aside .title {
font-size: 1.8rem;
}

/* 使用:is()优化 */
:is(.section, .article, .aside) .title {
font-size: 1.8rem;
color: #2c3e50;
}
这不仅减少代码量，更重要的是提升选择器优先级一致性——:is()内部列表的优先级取最高项，避免传统逗号分隔导致的优先级分散问题。

3. :where()实现优先级归零

与:is()语法相同但优先级始终为0，适合创建易覆盖的样式基座：css
/* 优先级为0，方便后续覆盖 */
:where(.dark-mode, .high-contrast) .text {
color: #f8f9fa;
}

/* 后续增强样式 */
.high-contrast .text {
text-shadow: 0 0 2px #000;
}

三、复合逻辑的实战应用

现实场景中往往需要组合使用AND/OR逻辑，此时可分层构建选择器：

1. AND与OR的嵌套

css /* (状态为active OR hover) AND 角色为admin */ :is(.active, :hover).admin-panel { box-shadow: 0 0 15px rgba(52, 152, 219, 0.5); }

2. 复杂条件组合

html

css /* 纵向导航栏的内部链接，且处于激活状态 */ nav.vertical :is(a.internal).active { border-left: 3px solid #3498db; }

四、浏览器兼容性解决方案

针对新特性兼容问题，可采用渐进增强策略：css
/* :is()回退方案 */
.card-header,
.card-footer {
padding: 15px;
}

@supports selector(:is()) {
:is(.card-header, .card-footer) {
padding: 20px;
}
}

/* :has()的Polyfill方案（示例） */
import 'css-has-pseudo';
document.querySelectorAll('.card:has(.icon)').forEach(el => {
el.classList.add('has-icon');
});

五、性能优化建议

虽然逻辑选择器功能强大，但需注意性能影响：
1. 避免深层嵌套：:is(.a, .b) :is(.c, .d)可能触发大规模DOM遍历
2. 优先使用类选择器：.class的性能优于属性选择器[attr]
3. 限制通配符使用：*在复杂逻辑中可能引发渲染瓶颈

结语

通过组合选择器、:is()、:where()等方案，我们完全可以在CSS中实现复杂的逻辑运算效果。2023年主流浏览器对CSS Level 4选择器的支持率已超过94%（数据来源：CanIUse），开发者可以更放心地使用这些现代方案。记住，优秀的CSS不只是实现视觉效果，更是通过巧妙的逻辑控制构建可维护的样式系统。