使用教程

主要内容：CSS样式扩展使用全流程；典型案例示范。

使用流程

1. 明确改动的样式范围
2. 在运行端获取元素的类名
3. 代码编写
4. 样式预览及调试

tip：研发同学的小妙招

可直接在运行端Elements中调整代码，调整完成后复制至后台配置。

入门案例

场景描述：将PC端表单页面中的所有标题颜色改为蓝色

1. 明确改动的样式范围：

• 范围：PC端所有A表单的添加/编辑/详情页面
• 元素：A表单的所有字段标题
• 代码入口：表单设计

2. 获取元素的类名：

打开PC运行端，打开调试器，选择元素，获取类名：label_top

3. 代码编写：

:root .label_top{
  color: blue;
}

4. 样式预览及调试：

配置完成后，刷新页面重新查看页面样式。

特殊情况说明

root类说明

匹配该范围内（应用/流程/外部单/表单）的根元素，比如有个span标签，你想修改当前表单下的span标签文字颜色，此时可以将其写在当前表单的:root里面，进行样式隔离，不会影响到其他表单

使用时，需要在:root和具体的类名.class 中间添加一个空格，否则写进去的样式是无效的！例：

:root .label_top{
  color: blue;
}

提供特定的自定义样式隔离类名(id选择器+class选择器)

类名规则看下图

移动端和PC端样式隔离规则

可使用到移动端专有类名.app_应用id_mobile /.form_按钮Id_表单id_mobile/.#process_流程id_mobile等等。