本指南介绍了如何在 Discourse 网站上进行 CSS 更改，包括 CSS 简介、在 Discourse 中添加 CSS 的位置以及如何使用浏览器检查工具查找正确的选择器。
所需用户级别：管理员
摘要
本指南涵盖：
- CSS 简介和关键概念
- 如何使用主题组件将 CSS 添加到 Discourse 网站
- 使用浏览器检查工具查找正确的 CSS 选择器
理解 CSS 基础知识
CSS 代表层叠样式表。以下是三个需要理解的关键概念：
- 结构：CSS 规则由选择器、属性和值组成。
p {
color: red;
}
- 选择器：
p（定位所有 HTML<p>标签） - 属性：
color - 值：
red
- 层叠：最后应用的规则优先。例如：
p {
color: red;
}
p {
color: green;
}
段落将显示为绿色，因为这是最后应用的规则。
- 特异性：更具体的规则会覆盖不那么具体的规则。例如：
div p {
color: green;
}
p {
color: red;
}
div 中的段落将保持绿色，因为 div p 比 p 更具体。
将 CSS 添加到 Discourse 网站
要将 CSS 添加到 Discourse 网站：
-
从侧边栏转到
Appearance > Themes & components，或访问您网站的以下网址：https://yoursite.com/admin/customize/components
-
分别点击“Install”和
“Create New”。
-
为您的主题组件命名，然后点击“Create”。
-
选择要应用组件的主题。
-
点击“Edit Code”。
-
将您的 CSS 添加到 CSS 选项卡。
-
点击“Save”以应用您的更改。
如果您有多个用户可选择的主题，请确保将您的主题组件添加到所有相关主题。
查找正确的 CSS 选择器
使用浏览器检查工具查找正确的 CSS 选择器：
-
右键点击您要修改的元素。
-
从上下文菜单中选择“Inspect”。
-
在开发者工具面板中，找到元素选择器。
-
点击相应的选择器，然后添加您的 CSS 规则。
-
复制规则，将其粘贴到您的主题组件的 CSS 部分，然后删除其他规则。
要获得更具体选择器，您可能需要复制 Discourse 现有样式中使用的选择器，并在您的主题组件中进行修改。
以下视频演示了上述步骤：
如果您的更改未生效，请检查：
- 主题组件是否已在您的主题中启用。
- 您的 CSS 规则是否足够具体，可以覆盖现有样式。
