如何更改特定CSS伪元素的属性？

Question

我正在尝试将特定颜色添加到整个页面中显示6次的特定伪元素，但我似乎无法选择该特定元素（我没有选择所有的问题：在元素之后） 。

首先，我的JSFIDDLE is here。

你在这里看到的“三角形”就是我想要着色的东西：

这是处理三角形颜色的CSS代码：

.timeline > li > .timeline-panel:after {
border-left: 14px solid #fff;
}

显然，如果我将颜色从#fff更改为＃333，它将影响页面上的所有三角形。我的问题是......我怎么只影响一个特定的三角形？我的目标是更改页面上每个三角形的颜色（在本例中为6个不同的三角形）。我试着像这样给三角形分配一个ID：

#triangle1 .timeline > li > .timeline-panel:after {
border-left: 14px solid #333;
}

然后在HTML代码中的list标签中添加ID，如下所示：

<li id="triangle1">

但是，这没效果。我需要更具体吗？有没有更好的办法？ JQuery的？

Answer 1

您的选择器不正确，请使用li#triangle1 > .timeline-panel:after {}。 li是具有您的ID的元素，而不是ul的祖先之一。