获取最后一个可见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真实页面上的s 数量可能不同(甚至是display:none那些).

Answer 1

您可以使用JavaScript或jQuery选择并设置样式,但仅靠CSS无法做到这一点.

例如,如果您在网站上实现了jQuery,那么您可以这样做:

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

虽然希望你有一个类/ ID包裹你正在选择的div,在这种情况下你的代码看起来像:

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

Answer 2

这个问题的真正答案是,你不能这样做.仅CSS答案的替代方案不是这个问题的正确答案,但如果您可以接受JS解决方案,那么您应该在这里选择一个JS或jQuery答案.然而,正如我上面所说,真正的,正确的答案是你不能可靠地在CSS中做到这一点,除非你愿意接受:not运算符[style*=display:none]和其他这样的否定选择器,这只适用于内联样式,并且总体上很差解.

Answer 3

尝试

div:not([style*="display: none"])

Answer 4

我认为不可能通过css值选择(显示)

编辑:

在我看来,在这里使用一些jquery是有意义的:

$('#your_container > div:visible:last').addClass('last-visible-div');

Answer 5

如果可以使用内联样式，则可以完全使用CSS进行。

当前一个元素可见时，我正在用它在下一个元素上做CSS：

div [style ='display：block;'] +表格{
  过滤器：blur（3px）;
}

Answer 6

纯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>

http://jsfiddle.net/uEeaA/90/