Question

我正在尝试改变颜色：之后，使用JQuery虽然我似乎无法改变它，但是有人能指出我正确的方向吗？

<script>
    $( document ).ready(function() {
        $( ".breadcrumb li:nth-child(1) a" ).css({'background-color' : '#f00'}); // Works
        $( ".breadcrumb li:nth-child(1):after " ).css({'background-color' : '#f00'}); // Does not work?
    });
</script>

我尝试过使用一些选择器，但我找不到正确的选择器。提前谢谢。

Answer 1

你无法操纵：之后，因为它在技术上不是DOM的一部分，因此任何JavaScript都无法访问它。但是你可以添加一个新的类：在指定之后。

CSS

.breadcrumb li:nth-child(1) .test:after { 
    border-top-width: 22px;
    border-left-width: 22px;
    border-right-width: 22px;
}

JS

$('.breadcrumb li:nth-child(1)').toggleClass('test');

Taken from this answer

Answer 2

试试这个，

<强> CSS

.li-active-after a{background-color : #f00; }
.li-active-after:after{background-color : #f00; }

<强> Jquery的

$( document ).ready(function() {
    $(".breadcrumb li").removeClass('li-active-after');
    $(".breadcrumb li:nth-child(1)").addClass('li-active-after');
});

Answer 3

您无法使用JQuery更改（：after）的样式。但你可以通过在你使用的DIV之后在HTML中插入DIV来解决它，然后你可以使用JQuery来处理它

<div class="mydiv_1"></div> <div class="after_div"></div>
<div class="mydiv_2"></div>  <div class="after_div"></div>

您可以将此示例改编为您的代码/脚本;）

Answer 4

而不是添加另一个div来替换：在使用其他选择器之后，只需使用类就可以有更好的解决方案。这是jsfiddle 点击灰色框，它会为div添加class，这将更改其:after的颜色

更改后的颜色：after - JQuery

4 个答案: