如何让Pico.css仅在指定元素生效，避免接管全局默认样式？

完全可行，有两种简单方法可以实现你的需求：

方法一：使用官方提供的「Scoped」版本 #

Pico.css官方已经准备了仅作用于指定容器的Scoped版本，所有样式规则都被限定在.pico类选择器的后代元素中。

• 直接引入这个版本的CSS文件后，只要把需要应用Pico样式的内容放在带有class="pico"的容器内即可：

<div class="pico">
  <!-- 此容器内的所有表单、按钮等元素会应用Pico样式 -->
  <label>用户名</label>
  <input type="text" placeholder="请输入">
  <button>确认</button>
</div>

<!-- 容器外的元素不受Pico样式影响 -->
<input type="text" placeholder="原生样式输入框">

方法二：手动修改全局版样式（适合已引入全局版的场景） #

如果你已经在使用全局版本的Pico.css，可以手动修改CSS文件，给所有全局样式规则加上.pico前缀：

• 打开Pico.css文件，找到所有全局选择器（如input、button、form、table等）
• 在每个选择器前添加.pico （注意保留空格，确保是后代选择器），比如：
  • 原规则：input { ... } → 修改后：.pico input { ... }
  • 原规则：button { ... } → 修改后：.pico button { ... }
• 保存修改后的文件并重新引入，之后只有.pico容器内的元素会应用Pico的样式

两种方法都能有效避免Pico.css与其他库的样式冲突，让你精准控制样式的作用范围。

内容的提问来源于stack exchange，提问作者Solsiden