docs/docs/rules/cssAppend.md
cssAppend 协议用于在现有的 CSS 类型响应内容体后面插入指定内容。
生效条件：仅对响应类型
content-type包含html或css，且包含响应内容体的状态码（如200/500等）才生效⚠️ 注意：
204、304等无响应内容体的请求不受影响html 页面会自动包裹
<style>...</style>
通过 cssAppend 协议，你可以：
cssAppend 支持多种方式指定要追加的内容：
直接在规则中写明要追加的 CSS 内容。
# `value` 小括号内不能用空格或换行符
pattern cssAppend://(value) [lineProps...] [filters...]
示例：
www.example.com/index.html cssAppend://(.custom-btn{background:red;})
当要追加的 CSS 内容有空格或换行符或需要复用时可使用此方式。
pattern cssAppend://{custom-key} [lineProps...] [filters...]
``` custom-key
.dark-mode {
background: #333;
color: #fff;
}
```
引用在界面 Values（中央配置区）中预先定义好的 CSS 内容。
pattern cssAppend://{key-of-values} [lineProps...] [filters...]
前提： 在 Values 中存在一个名为 key-of-values 的键，其值为 CSS 内容。
当需要频繁编辑内容时，可以使用 Whistle 提供的临时文件功能。
pattern cssAppend://temp.css
操作步骤：
Command（Mac）/ Ctrl（Windows）cssAppend://temp.cssSave 保存保存后规则会自动变为类似以下格式：
https://example.com/test.css cssAppend://temp/11adb9c9e1142df67b30d7646ec59bcd34c855d9011d1a2405c7fc2dfc94568d.css
需要再次编辑时，用同样的方式点击该临时文件链接即可。
从本地文件或远程 URL 加载要追加的 CSS 内容。
# 从本地文件加载
pattern cssAppend:///User/xxx/custom.css
# 从远程 URL 加载（支持 http 和 https）
pattern cssAppend://https://cdn.example.com/styles/override.css
| 参数 | 是否必填 | 描述与示例 |
|---|---|---|
| pattern | 是 | 用于匹配请求 URL 的表达式。 |
| • 支持域名、路径、通配符、正则表达式。 | ||
| • 详见 匹配模式文档。 | ||
| value | 是 | 要追加的 CSS 内容，支持多种格式： |
| • 纯 CSS 代码文本 | ||
| • 支持从本地文件、远程 URL、内联、内嵌、Values 引用 | ||
| lineProps | 否 | 为规则设置附加属性。 |
• 例如：lineProps://important 可提升此规则的优先级。 | ||
| • 详见 lineProps 文档。 | ||
| filters | 否 | 可选的过滤条件，用于精确控制规则生效的场景。 |
| • 可匹配请求的 URL、方法、头部、体内容。 | ||
| • 可匹配响应的状态码、头部。 | ||
| • 详见 过滤器文档。 |
特殊说明：
content-type 响应头包含 css 的请求生效204、304 等无响应体的状态码不生效www.example.com/responsive.css cssAppend://{test.css}
``` test.css
@media (max-width: 768px) {
.sidebar { display: none; }
.main-content { width: 100%; }
}
```
cdn.example.com/bootstrap.min.css cssAppend://{test2.css}
``` test2.css
/* 覆盖 Bootstrap 默认样式 */
.btn-primary { background-color: #007bff !important; }
.container { max-width: 1400px; }
```
www.example.com/print.css cssAppend://{test3.css}
``` test3.css
@media print {
.no-print { display: none; }
a::after { content: " (" attr(href) ")"; }
}`
```
在响应内容前面注入内容：reqAppend
在 CSS 响应内容前面注入内容：cssPrepend
cssAppend 相反）替换 CSS 响应内容：cssBody
其他内容类型操作：