v2.1.1
文档GitHub
入门

条件样式

将 Pico CSS 样式限制在 .pico 容器内的元素上，按需选择性生效，适合多种样式并存的环境。

Pico 提供 .conditional 版本，只将样式应用于 .pico 类容器内的元素。

保留的最小化 :root 重置则确保整个网站的排版风格一致。

参见版本选择器，轻松挑选最适合项目需求的 Pico CSS 版本变体。

手动安装

下载 Pico，并在网站的 <head> 中引入 /css/pico.conditional.min.css。

<link rel="stylesheet" href="css/pico.conditional.min.css">

通过 CDN 使用

或者，你可以使用 jsDelivr CDN 引入 pico.conditional.min.css。

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.conditional.min.css">

通过 Sass 使用

@use "pico" with (
  $parent-selector: ".pico"
);

起步 HTML 模板

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="color-scheme" content="light dark" />
    <link rel="stylesheet" href="css/pico.conditional.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main>
      <section>
        <p>Unstyled hello world!</p>
      </section>
      <section class="pico">
        <p>Styled hello world!</p>
      </section>
    </main>
  </body>
</html>

示例

应用 Pico 样式的示例：

查看源码
<form class="pico">
<input type="text" name="text" placeholder="Text" aria-label="Text" />
</form>

未应用 Pico 样式的示例：

查看源码
<form>
<input type="text" name="text" placeholder="Text" aria-label="Text" />
</form>

演示