pico.css 自 v2 起提供「条件式」引入模式（pico.conditional.min.css），仅对添加 `class="pico"` 的元素生效，彻底解决与其他 ui 库的样式冲突问题。
Pico.css 以轻量、语义化和开箱即用著称，但其默认版本会全局重置表单控件、按钮、链接等基础元素样式，容易与 Bootstrap、Tailwind、自定义组件库或框架内建样式发生冲突。为兼顾 Pico 的设计一致性与项目可控性，v2 引入了 Conditional Mode（条件式模式） —— 这正是你所需的安全集成方案。
✅ 正确引入方式
替换原有 <link> 标签，使用官方提供的条件式 CSS 文件：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.conditional.min.css"> <!-- 或本地路径：css/pico.conditional.min.css -->
⚠️ 注意：必须使用 pico.conditional.min.css（非 pico.min.css），且确保版本 ≥ 2.0.0。
? 使用规则：显式启用，按需生效
条件式模式下，Pico.css 完全放弃全局样式注入，所有样式规则均以 .pico 为祖先选择器前缀。这意味着：
- 普通元素（如 <button>、<input>、<article>）保持浏览器默认样式或现有 CSS 状态；
- 仅当元素（或其任意父级）拥有 class="pico" 时，内部子元素才被 Pico 样式接管；
- 支持嵌套作用域：.pico section > p、.pico .form-group input 等均有效。
? 实际示例
以下 HTML 展示「混合渲染」效果：
立即学习“前端免费学习笔记（深入）”；
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/pico.conditional.min.css">
<title>Pico Conditional Demo</title>
</head>
<body>
<!-- ❌ 无 pico 类：完全不受影响 -->
<section>
<h2>Plain HTML Section</h2>
<button>Native Button</button>
<input type="text" placeholder="Unstyled input">
</section>
<!-- ✅ 启用 Pico 样式（仅此区域） -->
<section class="pico">
<h2>Pico-Styled Section</h2>
<button>Beautiful Pico Button</button>
<input type="email" placeholder="Pico-styled input">
<details>
<summary>Toggle with Pico design</summary>
<p>This entire subtree inherits Pico's spacing, typography and interactivity.</p>
</details>
</section>
</body>
</html>? 补充说明
- 条件式模式不改变 Pico 的组件语法：仍可使用 <form>, <dialog>, <kbd> 等语义化标签，只要它们位于 .pico 作用域内即可获得完整样式支持；
- 若需在多个不相邻区域启用，可为每个容器单独添加 class="pico"；
- 不建议混用 pico.min.css 与 pico.conditional.min.css，会导致样式优先级混乱；
- 如使用构建工具（Vite/Vue/React），可通过 CSS 模块或 @import 方式引入，原理一致。
通过条件式模式，你既能享受 Pico.css 精心打磨的设计系统，又能完全掌控样式作用域——真正实现「按需加载、零侵入、高兼容」。
