Pico CSS中semantic-root-element未作用于表单元素的问题排查

在Pico CSS v2.0.6中，$semantic-root-element仅默认作用于语义化HTML容器（如<article>、<section>），而表单基础元素（input、select、textarea）的样式由独立变量控制，不会自动继承语义根选择器。要让这些元素的样式带上指定父选择器，需补充以下配置：

• 显式设置$forms-root-element变量，值与$semantic-root-element保持一致，比如：$forms-root-element: #nffaac;
• 若需要按钮也受该父选择器约束，可同步设置$buttons-root-element: #nffaac;
• 注意：所有自定义变量必须在引入Pico的Sass文件之前定义，否则配置不生效

示例代码：

// 自定义变量配置（必须放在引入Pico之前）
$semantic-root-element: #nffaac;
$forms-root-element: #nffaac;
$buttons-root-element: #nffaac; // 可选

// 引入Pico核心Sass
@import '@picocss/pico/scss/pico';

原理：Pico将不同模块的根选择器拆分为独立变量，表单模块默认使用全局选择器，只有显式指定$forms-root-element后，_basics.scss中的表单元素样式才会自动带上该父选择器前缀。

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