给出没有 class 特定样式的锚元素

Question

我真的很难找到一种方法来为每个类别 link 设置不同的颜色。

所以我创建了一个 post，其中包含 3 个类别标签，例如“食物”、“饮料”和“乐趣”

在显示我所有不同 post 的新闻页面上，其中包含我创建的每个类别的可点击 link。假设我希望食品标签为绿色，饮料标签为蓝色。我似乎无法找到如何做到这一点？

当我检查它显示的元素时：<a href="http://localhost/domain/?cat=19" rel="category">food</a> 表示食物，<a href="http://localhost/domain/?cat=20" rel="category">drink</a> 表示饮料。

没有 class 所以我可以按照我的风格分别定位每个 sheet。有什么想法可以单独设置这些样式吗？

非常感谢

Answer 1

有不同的解决方案可以为没有 class 的元素提供单独的样式。其中之一是通过 parent 来计算 child 个元素。这看起来怎么样？

CSS

.post-categories > li:first-child > a {
    color: red;
}

.post-categories > li:nth-child(2) > a {
    color: blue;
}

因此对于第一个 child 使用 pseudo-selector :first-child 为每个后续 :nth-child(#) 添加编号。

另一种解决方法是这样的：

a[href="http://localhost/domain/?cat=19"] {
    color: red;
}

a[href="http://localhost/domain/?cat=20"] {
    color: blue;
}

但是，这需要更多 DOM 来搜索您的页面，检查每个锚点是否匹配 href。第一种方法对用户更友好。

给出没有 class 特定样式的锚元素

Give anchor element without class specific style

css

anchor