参见英文答案 >
Combining :last-child with :not(.class) selector in CSS1
如何选择最后一个没有.hidden类的li？
如何选择最后一个没有.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 class="hidden">
<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 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>
