使用jQuery修改：after伪元素的CSS

在本例中，我使用：after伪元素在块后显示装饰三角形。这样做的目的是将当前选定的li与其他li区分开来

html格式如下：

<ul>
    <li class="active" style="background-color: hsl(108, 60%, 50%)">One</li>
    <li style="background-color: hsl(36, 60%, 50%)">Two</li>
    <li style="background-color: hsl(252, 60%, 50%)">Three<li>
</ul>

我想更改li.active:：after伪元素的border left color style属性，以匹配class=active的元素的背景色

我提出了以下jquery：

$("ul li").click(function() {
    $("ul li").removeClass("active");
    $(this).addClass("active");
    $("li.active::after").css('border-left-color', $(this).css('background-color'));
});

---

这不符合预期。非常感谢您的帮助。

您不能使用jquery选择伪元素，例如：before和：after。但在您的情况下，可以在：after上使用父li的样式，从而匹配border color属性

CSS更新：

ul li {
    width: 300px;
    height: 30px;
    border: 1px dashed;
    position: relative;
}
li:first-of-type.active {
  border-left-color: green; // your exact colors here
}
li:nth-of-type(2).active {
  border-left-color: orange;
}
li:last-of-type.active {
  border-left-color: purple;
}
li.active::after {
    content: " 0020";
    display: block;
    font-size: 0px;
    position: absolute;
    left:100%;
    top: 0%;
    width: 0px;
    height: 0px;
    background: transparent;
    border: 17px solid transparent;
    border-left-color: inherit;
}

---

然后删除包含：after选择器的js行。不再需要了

当@DMTinter提交他的答案时，我已经写了这篇文章，所以为重复的内容道歉：

使用父元素的边框颜色属性

由于无法在JQuery中选择：after&：before伪元素，因此我找不到该元素的引用。抱歉，您必须使用父元素的CSS才能使其正常工作：

根据您的代码：

<ul>
    <li class="active" style="background-color: hsl(108, 60%, 50%); border-color: hsl(108, 60%, 50%)">One</li>
    <li style="background-color: hsl(36, 60%, 50%); border-color: hsl(36, 60%, 50%)">Two</li>
    <li style="background-color: hsl(252, 60%, 50%); border-color: hsl(252, 60%, 50%)">Three<li>
</ul>

ul li {
    width: 300px;
    height: 30px;
    border: 1px dashed;
    position: relative;
    border-color: #ccc; /* -> default "arrow" colour */
}

li.active:after {
    content: " 0020";
    display: block;
    font-size: 0px;
    position: absolute;
    left:100%;
    top: 0%;
    width: 0px;
    height: 0px;
    background: transparent;
    border: 16px solid transparent;
    border-left-color: inherit;
}

---

我不知道这是否是一个copypasta/rewrite错误，但是您的li.active:：active在开始和结束时都丢失了。JQuery无法操作：after伪元素，因为伪元素不会出现在DOM@BeatAlex谢谢你接电话。这是一个打字错误。然而，这并不能解决我的问题。非常聪明。我对它进行了一些修改，以获得我想要的内容：。走向你：对不起，我不得不把它交给@dmtinner，因为我首先看到了他的答案。谢谢你的时间。Np！我从中学到了一些东西所以没什么大不了的

<ul>
    <li class="active" style="background-color: hsl(108, 60%, 50%); border-color: hsl(108, 60%, 50%)">One</li>
    <li style="background-color: hsl(36, 60%, 50%); border-color: hsl(36, 60%, 50%)">Two</li>
    <li style="background-color: hsl(252, 60%, 50%); border-color: hsl(252, 60%, 50%)">Three<li>
</ul>

ul li {
    width: 300px;
    height: 30px;
    border: 1px dashed;
    position: relative;
    border-color: #ccc; /* -> default "arrow" colour */
}

li.active:after {
    content: " 0020";
    display: block;
    font-size: 0px;
    position: absolute;
    left:100%;
    top: 0%;
    width: 0px;
    height: 0px;
    background: transparent;
    border: 16px solid transparent;
    border-left-color: inherit;
}