html - 如何选择没有特定类的最后一个元素？

Question

<分区>

Answer 1

目前，没有 CSS 方法能够找到一个元素，然后再找到另一个特定元素。

可能很快就会出现 CSS 关系伪类 :has() ，它将使您想要的成为可能。目前在 CSS Selectors Level 4 Draft 中并且看起来不太可能很快在任何浏览器上推出。

下面是一个演示，但在 Selectors 4 Draft 至少处于工作草案之前不要指望它能工作。

关注CanIUse看看它何时变得可用。

ul li:has(+ .hidden:last-child),
ul li:last-child:not(.hidden) {
  background: red;
}

<ul>
  <li>
    <button>1</button>
  </li>
  <li>
    <button>2</button>
  </li>
  <li class="hidden">
    <button>3</button>
  </li>
</ul>

---

:has() 虽然在 jQuery 中可用，所以这里有一个 jQuery 替代方案

Read more here from the Official jQuery Docs

$('ul li:has(+ .hidden:last-child), ul li:not(.hidden):last-child').css('background', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <button>1</button>
  </li>
  <li>
    <button>2</button>
  </li>
  <li class="hidden">
    <button>3</button>
  </li>
</ul>