使用css [duplicate]为特定类设置最后一个元素的样式

Question

这个问题在这里已有答案：

• Can I combine :nth-child() or :nth-of-type() with an arbitrary selector? 5个答案

我正在尝试使用活动类（*元素）设置最后一个div的样式，但是当它获得活动类时，我的代码样式最后一个div（x元素），如何使用less实现我的意图？

HTML：

<div class="owl-stage">
    <div class="owl-item"></div>
    <div class="owl-item active"></div>
    <div class="owl-item active"></div>
    <div class="owl-item active"></div>*
    <div class="owl-item"></div>
    <div class="owl-item"></div>x
</div>

减：

   .owl-item {

            &.active {
                border-right: 1px solid @borderColor;

                &:last-of-type{
                    border-right:none;
                }
            }
        }

Answer 1

在你的情况下，last-of-type和last-child将始终引用最后一个元素，而不是具有活动类的最后一个元素。但是如果所有活动元素都相互跟随并且你有3个活动元素，你可以试试这个：

.owl-item.active + .owl-item.active + .owl-item.active{
 font-size :30px;
 color:red;
}

<div class="owl-stage">
    <div class="owl-item">1</div>
    <div class="owl-item active">2</div>
    <div class="owl-item active">3</div>
    <div class="owl-item active">4</div>
    <div class="owl-item">5</div>
    <div class="owl-item">6</div>
</div>

但是如果元素的数量是未定义的并且没有关于活动类的特定逻辑，我认为你将无法为此找到CSS选择器。

---

您可以考虑使用JS解决方案：

$('.owl-item.active').last().css('color','red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="owl-stage">
  <div class="owl-item">1</div>
  <div class="owl-item active">2</div>
  <div class="owl-item active">3</div>
  <div class="owl-item">4</div>
  <div class="owl-item  active">5</div>
  <div class="owl-item">6</div>
</div>

Answer 2

last-of-type可能是问题，因为它按元素类型选择最后的<div>。请尝试使用last-child：

.owl-item {
    &.active {
        border-right: 1px solid @borderColor;
        &:last-child{ border-right:none; }
    }
}

Answer 3

HTML代码：

<div class="owl-stage">
    <div class="owl-item active">A</div>
    <div class="owl-item active">B</div>
    <div class="owl-item active">C</div>
    <div class="owl-item active">D</div>
    <div class="owl-item">E</div>
    <div class="owl-item">F</div>
</div>

jQuery代码：

$( ".owl-stage .owl-item.active:last" ).css({
    backgroundColor : "yellow"
});

OUTPUT：