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

Give anchor element without class specific style

我真的很难找到一种方法来为每个类别 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。有什么想法可以单独设置这些样式吗?

非常感谢

有不同的解决方案可以为没有 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。第一种方法对用户更友好。