css last-child with :not 选择器答案

【问题标题】：css last-child with :not selectorcss last-child with :not 选择器
【发布时间】：2016-05-18 19:26:43
【问题描述】：

我有一个动态编号 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) 选择器如何，样式始终适用于最后一个元素。是否有另一种方法来设置最后一个没有 .disabled 类的 .column 样式？

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

【问题讨论】：

标签： javascript jquery html css css-selectors

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

【讨论】：

用逗号替换冒号。
@kazimt9，哎呀。 ty
看起来不错但是.. 我明白了：prntscr.com/b3jr8g 和 prntscr.com/b3jstb :/ 这可能是什么？
@vlrprbttst，这很正常。 border-right: 1px solid black 称为 shorthand，实际上是一行中的 3 个属性：border-width、border-style 和 border-color。 jQuery 只是将速记拆分为您看到的 3 个属性。
它实际上是一个非常复杂的菜单，当您单击时，li 项目会四处移动，我很确定这是时间问题或其他什么。谢谢你的帮助！

【解决方案2】：

您可以选择 jQuery 中的最后一个 ul 标签，检查它是否被禁用并在适当的情况下应用您的样式，如下所示：

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

【讨论】：

在这种情况下失败：<ul class="column"></ul><ul class="column disabled"></ul>。