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

概述参见英文答案 > Combining :last-child with :not(.class) selector in CSS                                    1 如何选择最后一个没有.hidden类的li？ 我有这样的HTML和CSS： ul li:last-child:not(:first-child):not(.hidden) button { b 参见英文答案 > Combining :last-child with :not(.class) selector in CSS1
如何选择最后一个没有.hIDden类的li？

我有这样的HTML和CSS：

ul li:last-child:not(:first-child):not(.hIDden) button {  background-color: red;}

<ul>      <li>        <button>1</button>      </li>      <li>        <button>2</button>      </li>      <li >        <button>3</button>      </li>    </ul>

解决方法 在目前的时刻,没有一种CSS方式可以找到另一个特定元素后面的元素.

可能很快,会有CSS关系伪类：has(),这将使你想要的可能.这个目前在CSS Selectors Level 4 Draft,并且看起来不太可能随时在任何浏览器上推出.

演示如下,但不要指望它在“选择器4草稿”至少在“工作草案”中运行.

注意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 >    <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 >    <button>3</button>  </li></ul>

总结

以上是内存溢出为你收集整理的html – 如何选择没有特定类的最后一个元素？全部内容，希望文章能够帮你解决html – 如何选择没有特定类的最后一个元素？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。