二甲基

行内元素属性#

在行内文本、链接或高亮语法后紧跟 {} 声明属性：

1
[外部链接](https://example.com){target="_blank" rel="noopener"}
2

3
==高亮文本=={.secondary}
4

5
`code phrase`{.custom-badge}

渲染效果：

• 新标签页打开：外部链接{target=“_blank” rel=“noopener”}
• 次级语义高亮：高亮文本
• 带自定义 class 的行内代码：code phrase{.custom-badge}

三项属性最终都会落到生成的 HTML 标签上：链接多出 target 与 rel，<mark> 多出 secondary class，<code> 多出 custom-badge class。前者立即可见（点击不会跳出站内浏览），后两者只有在你为这些 class 写了样式时才产生视觉差异。

块级元素属性#

在块级容器、标题或段落后声明：

1
## 自定义锚点标题 {#custom-section-id}
2

3
::: tip[自定义样式容器]{class="custom-highlight-box"}
4
容器内部内容
5
:::

渲染效果：

常用属性简写#

• .class-name：等价于 class="class-name"
• #id-name：等价于 id="id-name"
• key="value"：直接设定 HTML 属性

1
这是一段强调说明。{.lead-text}
2

3
### 章节标题 {#section-anchor}
4

5
![配图](./cover.webp){loading="lazy" width="720"}

同一元素需要多个属性时可以连续书写，简写与键值对可混用：

1
==混合写法=={.secondary #highlight-1 title="鼠标悬停提示"}

渲染效果：混合写法{.secondary #highlight-1 title=“鼠标悬停提示”}

与容器语法的配合#

所有 ::: 容器都支持在标题后追加属性字典，这让同一类容器可以承载不同的样式角色：

1
::: warning[构建前请检查]{class="build-warning"}
2
未通过 `astro check` 的提交不会进入部署流水线。
3
:::

渲染效果：

小结#

属性字典是纯构建期语法，不会带来任何客户端运行时开销。