我该如何使用 CSS 来定位未解决的主题？

开发
,
1

要更改未解决主题的样式，将使用哪些 CSS 选择器？

1 个赞
2

你好 Dan :wave:

在主题列表中，它将是这样的：

.topic-list-item:not(.status-solved) {
    background: rgba(255,192,203,.2);
}

image
image1099×795 69.4 KB

在主题页面上，没有特定的类可以定位。

4 个赞
3

太好了，这奏效了！

有一个注意事项，类似于此问题，即查找 status-solved 类别的缺失意味着未启用解决方案的类别中的主题也将被突出显示。在我们的例子中，我向选择器添加了第二个类别，以仅定位支持类别：

/* 突出显示未解决的主题 */
.topic-list-item.category-support:not(.status-solved) {
    background: rgba(255,192,203,.2);
}

是否有更通用的解决方案，例如，如果存在更多已解决的类别，而不是重复选择器？

1 个赞
4

我尝试为已解决的任何类别找出通配符条件，但未能成功。但是，您可以将所有相关类别合并到一个代码片段中：

 /* 高亮未解决的主题 */

.topic-list-item.category-support,
.topic-list-item.category-another_category,
.topic-list-item.category-yet_another_category:not(.status-solved) {
    background: rgba(255,192,203,.2);
}

或者，您可以创建一个主题组件，并设置一个选项来添加您想要应用的任何类别。我怀疑可能有办法定位已启用已解决状态的类别，但我似乎无法弄清楚。:thinking:

5

我不确定我们是否能从主题列表中找出哪些主题属于“可解”类别。

如果你不打算每周更改类别设置，可以修改你和@Lilly编写的代码，但要添加一个循环，使其更易于阅读和维护。它仍然会使用类别类。

你可以重用这里提供的解决方案来解决此意图：

1 个赞
6

你好 :wave:

我创建了一个主题组件，用于在可解决主题的列表项中添加 .solvable-topic 类。

安装此主题组件后，您可以添加简单的 CSS 来实现此目的。 :slightly_smiling_face:

.topic-list-item {
  &.solvable-topic {
    &:not(.status-solved) {
      background: red;
    }
  }
}
5 个赞