# 使用不同颜色区分主题列表的行内容

**URL:** https://meta.discourse.org/t/differentiate-contents-from-the-topic-list-rows-using-different-colors/278710
**Category:** Development
**Tags:** topic-list-excerpts
**Created:** [2023年九月12日 11:25 UTC](https://meta.discourse.org/t/differentiate-contents-from-the-topic-list-rows-using-different-colors/278710 "2023-09-12T11:25:10Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2023年九月12日 12:42 UTC](https://meta.discourse.org/t/differentiate-contents-from-the-topic-list-rows-using-different-colors/278710/2 "2023-09-12T12:42:59Z")

</div>

你好，Renato 👋

你可以使用浏览器的开发者工具来定位这些元素，相关信息可以在这里找到：

[https://meta.discourse.org/t/make-css-changes-on-your-site/168101#browser-inspection-tools-7](https://meta.discourse.org/t/make-css-changes-on-your-site/168101#browser-inspection-tools-7)

然而，这些元素的样式是通过原始 SCSS 代码中的嵌套使用许多不同的选择器来定义的。

我建议从编译后的 CSS 开始，如果出现意外效果，再进行调整：

有未读帖子的主题：

```scss
# titles
.topic-list-main-link a.title,
.latest-topic-list-item .main-link a.title,
.topic-list .main-link a.title {
    color: var(--primary);
}

# categories
.badge-wrapper.bullet span.badge-category {
    color: var(--primary-high);
}

# tags
.topic-list-item.visited .topic-list-data a.discourse-tag, .latest-topic-list-item.visited a.discourse-tag, .category-topic-link.visited a.discourse-tag {
    color: var(--primary-medium);
}

```

已访问的主题：

```scss
# titles
.topic-list-item.visited .topic-list-data a.title:not(.badge-notification),
.latest-topic-list-item.visited a.title:not(.badge-notification),
.category-topic-link.visited a.title:not(.badge-notification) {
    color: var(--primary-medium);
}

# categories
.topic-list-item.visited .topic-list-data span.badge-category,
.latest-topic-list-item.visited span.badge-category,
.category-topic-link.visited span.badge-category {
    color: var(--primary-medium);
}

#tags
.topic-list-item.visited .topic-list-data a.discourse-tag,
.latest-topic-list-item.visited a.discourse-tag,
.category-topic-link.visited a.discourse-tag {
    color: var(--primary-medium);
}

```

摘要没有已访问主题的特定样式（但可以通过添加 CSS 进行调整）。

```scss
.topic-list .topic-excerpt {
    color: var(--primary-high);
}

```

---

_[View the full topic](https://meta.discourse.org/t/differentiate-contents-from-the-topic-list-rows-using-different-colors/278710)._