如何在多类中设置第一个孩子[重复]答案

【问题标题】：How to set first-child in multi class [duplicate]如何在多类中设置第一个孩子[重复]
【发布时间】：2018-03-22 16:23:04
【问题描述】：

您好，我有一个关于 CSS 的问题。我想更改“活动”类的第一个元素“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 解决这个问题？？？

请帮忙。

【问题讨论】：

:first-child 总是指父级的第一个子级。在这种情况下，它指的是1。添加类以尝试更改目标不会更改此行为。
第n个选择器引用它忽略类的父级和兄弟级
它是关于 jquery 而不是 css 所以不要重复。

标签： jquery css

【解决方案1】：

您可以在 jquery 中像这样使用 first 和 class。

$( ".active:first" ).css( "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>

【讨论】：

【解决方案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
                        }
                    }
                });

【讨论】：