css last-child with：not selector

Question

我有一個動態數量的ul.column ，其中一些有disabled類。 例如：

<ul class="column"></ul>
<ul class="column"></ul>
<ul class="column disabled"></ul>

我不知道有多少可以有，但我想要一個應用border-right最后.column 不也有.disabled類。

我嘗試過類似的東西：

ul:not(.disabled):last-child {border-right:1px solid black}

和

ul:last-child:not(.disabled) {border-right:1px solid black}

但是樣式始終適用於最后一個元素，而不管:not(.disabled)選擇器。 還有另一種方式來設計最后一種。 column也沒有.disabled類？

我很好用jQuery，但我不知道如何實現我想要的。

Answer 1

僅使用css選擇器是不可能的。 你可以使用jQuery。

演示

 $('ul:not(.disabled):last').css('border-right', '1px solid black'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul class="column"> <li>test</li> </ul> <ul class="column"> <li>test</li> </ul> <ul class="column disabled"> <li>test</li> </ul> 

Answer 2

您可以在jQuery中選擇最后一個ul標記，檢查它是否已禁用，並在適當時應用樣式，如下所示：

if(!$('ul').last().hasClass('disabled')){
    $('ul').last().css('border-right', '1px solid black');
}