html - 在特定类别上编辑 css

Question

我有一个类别列表，每个类别在我的主页上都有自己的标签和图标。每个类别标签/图标应该是唯一的颜色。

这通过 HTML 很容易:

<!-- ngRepeat: category in categories | orderBy:'display_priority' --> 
<a ng-href="explore?category=53" ng-repeat="category in categories | orderBy:
'display_priority'" class="ui random-color item large label ng-binding ng-scope" 
ng-show="hasCategory" href="explore?category=53" style="color:red";>

UI 正在开发中，每次 UI 更新(定期)都会删除此 HTML。因此，我试图通过 CSS 实现相同的结果。

我可以使用以下代码一般地更改类别标签的颜色(即使它们都具有相同的颜色):

#front-page .ui.label {
color: #XYZ
}

是否可以仅通过 CSS 单独更改每个标签的颜色？

Answer 1

如果类别数量有限，那么您可以使用一组 CSS3 nth-child 伪类来执行此操作:

http://www.sitepoint.com/web-foundations/understanding-nth-child-pseudo-class-expressions/

您也可以通过在循环中枚举类别 DOM 元素然后设置元素的 css 颜色，使用 JavaScript 动态执行此操作。