获取最后一个可见 div 的 CSS 选择器

Question

一个棘手的 CSS 选择器问题，不知道它是否可能。

假设这是 HTML 布局：

 <div></div>
<div></div>
<div></div>
<div style="display:none"></div>
<div style="display:none"></div>

我想选择显示的最后一个 div （即不是 display:none ），这将是给定示例中的第三个 div 。请注意，真实页面上的 div 的数量可能会有所不同（甚至是 display:none 的数量）。

原文由 Vishal Shah 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 JavaScript 或 jQuery 对其进行选择和设置样式，但仅 CSS 无法做到这一点。

例如，如果你在网站上实现了 jQuery ，你可以这样做：

 var last_visible_element = $('div:visible:last');

虽然希望您将在您选择的 div 周围包含一个类/ID，但在这种情况下，您的代码将如下所示：

 var last_visible_element = $('#some-wrapper div:visible:last');

原文由 Surreal Dreams 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这个问题的真正答案是，你做不到。纯 CSS 答案的替代方案不是该问题的正确答案，但如果您可以接受 JS 解决方案，那么您应该在此处选择 JS 或 jQuery 答案之一。但是，正如我上面所说，真正正确的答案是，除非您愿意接受 :not 运算符和 [style*=display:none] 以及其他类似的否定，否则您 无法在 CSS 中可靠地执行此 操作选择器，它只适用于内联样式，是一个总体上很差的解决方案。

原文由 dudewad 发布，翻译遵循 CC BY-SA 3.0 许可协议