能否用 CSS 定位特定样式？

支持
1

大家好，

我正在对我们网站的一个主主题组件中的多个样式进行非常微小的常规编辑。这意味着我们无需复制（fork）或修改远程样式，也不必担心在下次更新时我们的修改会被覆盖。到目前为止，我的修改都是全局性的，比如修改“点赞”按钮等。

我想知道是否有可能在不影响其他样式的情况下，单独针对主题组件中的某一个特定样式进行修改？是否可以通过某些数据变量来实现？

对于如此微小的改动，我不想为此单独创建一个主题组件。我更喜欢用一个主题组件来统一管理所有全局修改的想法。

2

是的，通常你可以依赖 CSS 中的 特异性。如果你不熟悉 CSS，简单来说就是：如果有一组样式针对同一个元素，那么更具体的样式将生效。

<div class="custom-container">
  <a class="custom-link">链接文本</a>
</div>

因此，你需要查看的是，你想要修改的组件中的元素（或其父元素）是否在某个地方拥有唯一的类名……例如：

在上面的示例中，你可以使用 .custom-link；如果元素本身没有直接的类名，则可以利用父元素，例如 .custom-container a。如果组件中的样式最初定义为 .custom-link，你可以通过更具体地指定 a.custom-link 来确保覆盖它。

如果组件中没有任何唯一的类名，你还可以使用插件出口容器。当在自定义中使用插件出口时，容器会添加一个自定义类名。以样式化链接为例，这可能看起来像 .above-site-header-outlet.brand-header a，其中“brand-header”是从组件添加的模板名称。

在最坏的情况下，如果你找不到简单的方法来样式化所需内容，也可以请求创建该组件的人添加一个类名。

如果以上内容难以理解，提供你正在尝试样式化的组件的具体示例会有所帮助。

3

非常感谢，这确实很有帮助。

举个例子，我安装了 Graceful 的实例。https://meta.discourse.org/t/a-graceful-theme-for-discourse/93040，我现在意识到这是你作为之前风格的延续而发布的。

在我的通用主题组件中，我做过诸如上传背景资源、更改点赞按钮以及其他一些事情，但我意识到我想更改使用深色调色板的背景颜色，而不会影响使用浅色调色板的版本。

确切地说，就是这一行：

background-color: $primary-very-low;

现在，我想尽可能在一个主题组件中完成所有操作，因为从技术上讲它们是相同的样式，直到像这样的小问题出现，而这些并不是通用的更改。如果可能的话，我不想不得不创建一个“深色”组件和一个“浅色”组件。

这里的目标是除了调色板调整外，保持 Graceful 原样不动，所有操作都从我们自己的组件中完成，这样当你或其他人推送更新时，我们就不需要不断重新应用我们的修改。

我注意到 Discourse 非常注重变量，这让我很喜欢，阅读主题指南一直是一种享受。我注意到像 [data-topic-id="117"] 这样的选择器存在，所以也许可以提出类似 [data-theme-id] 的想法？

4

@awesomerobot 另外，为了避免任何混淆，我仍然习惯将完整主题称为“样式”，因为我们还在从另一个论坛导入大型论坛的过程中。但在此处提到“样式”时，我指的是“主题”，抱歉！