一个棘手的 CSS 选择器问题，不知道它是否可能。
假设这是 HTML 布局：
<div></div>
<div></div>
<div></div>
<div style="display:none"></div>
<div style="display:none"></div>
我想选择显示的最后一个div（即不是display:none），这将是给定示例中的第三个div。
请注意，真实页面上divs 的数量可能不同（甚至display:none 的数量也可能不同。
【问题讨论】：
标签： html css css-selectors
您可以使用 JavaScript 或 jQuery 选择和设置样式，但仅 CSS 无法做到这一点。
例如，如果您在网站上实现了jQuery，您可以这样做：
var last_visible_element = $('div:visible:last');
虽然希望您将在您选择的 div 周围包含一个类/ID，但在这种情况下，您的代码将如下所示：
var last_visible_element = $('#some-wrapper div:visible:last');
【讨论】：
这个问题的真正答案是，你做不到。
仅 CSS 答案的替代方案不是此问题的正确答案，但如果您可以接受 JS 解决方案，那么您应该在此处选择 JS 或 jQuery 答案之一。
然而，正如我上面所说，真正正确的答案是你不能在 CSS 中可靠地做到这一点，除非你愿意接受 :not 运算符与 [style*=display:none] 和其他这样的否定选择器，它只适用于内联样式，是一个整体较差的解决方案。
【讨论】：
:not 运算符可以在某些情况下工作。例如，这非常适合我的情况，即我有 JS 有条件地隐藏元素，然后添加内联样式，因此您的解决方案实际上可以完美运行 :)
试试
div:not([style*="display: none"]):last-child
【讨论】：
如果您可以使用内联样式，那么您完全可以使用 CSS。
当上一个元素可见时，我正在使用它对下一个元素执行 CSS：
div[style='display: block;'] + table { 过滤器：模糊（3px）； }【讨论】：
[style*='display: block']，因为它可以有display: block !important;或者只是<div style="display: block"> :-)
.btn-group > .btn.d-none + .btn（用于引导程序的输入组）
我认为不可能通过 css 值进行选择（显示）
编辑：
在我看来，在这里使用一点 jquery 是有意义的：
$('#your_container > div:visible:last').addClass('last-visible-div');
【讨论】：
纯 JS 解决方案（例如，当您不使用 jQuery 或其他框架来处理其他事情并且不想仅仅为了这个任务而下载它时）：
<div>A</div>
<div>B</div>
<div>C</div>
<div style="display:none">D</div>
<div style="display:none">E</div>
<script>
var divs = document.getElementsByTagName('div');
var last;
if (divs) {
for (var i = 0; i < divs.length; i++) {
if (divs[i].style.display != 'none') {
last = divs[i];
}
}
}
if (last) {
last.style.background = 'red';
}
</script>
【讨论】：
使用 CSS 是不可能的，但是您可以使用 jQuery 来做到这一点。
jQuery：
$('li').not(':hidden').last().addClass("red");
HTML：
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="hideme">Item 4</li>
</ul>
CSS：
.hideme {
display:none;
}
.red {
color: red;
}
jQuery（以前的解决方案）：
var $items = $($("li").get().reverse());
$items.each(function() {
if ($(this).css("display") != "none") {
$(this).addClass("red");
return false;
}
});
【讨论】：
$('li:visible:last').addClass('red') 的 jQuery 很多。
$('li').not(':hidden').last().addClass("red");
另外，你可以用 javascript 来做， 在 Jquery 中你可以使用类似的东西：
$('div:visible').last()
*重新编辑
【讨论】：
如果您不再需要隐藏的元素，只需使用element.remove() 而不是element.style.display = 'none';。
【讨论】：
这对我有用。
.alert:not(:first-child){
margin: 30px;
}
【讨论】：