Question

您好我对css有疑问。我想将颜色更改为“active”类的第一个元素，即“3”。

这是我的代码，但它不起作用。

.item.active:first-child {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item clone" style="width:250px">1</div>
<div class="item clone" style="width:250px">2</div>
<div class="item active" style="width:250px">3</div>
<div class="item active" style="width:250px">4</div>
<div class="item active" style="width:250px">5</div>
<div class="item" style="width:250px">6</div>
<div class="item" style="width:250px">6</div>

有没有办法用Jquery解决这个问题？

请帮忙。

Answer 1

您可以在jquery中使用first和class这样的内容。

＆＃13;

$( ".active:first" ).css( "color", "red" );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item clone" style="width:250px">1</div>
<div class="item clone" style="width:250px">2</div>
<div class="item active" style="width:250px">3</div>
<div class="item active" style="width:250px">4</div>
<div class="item active" style="width:250px">5</div>
<div class="item" style="width:250px">6</div>
<div class="item" style="width:250px">6</div>

＆＃13;

Answer 2

Using owl carousel center event You can also achieved the same:   

 .center {
            color: red;
        }

     $('.nonloop').owlCarousel({
                    center: true,
                    items: 2,
                    loop: false,
                    margin: 10,
                    responsive: {
                        600: {
                            items: 4
                        }
                    }
                });

如何在多类中设置first-child

2 个答案: