css3获取最后一个元素,一个CSSselect器来获取最后一个可见的div

你可以用JavaScript或者jQuery来select和设置它，但是CSS本身不能做到这一点。

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

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

虽然希望你有一个包装在你select的div的class / ID，在这种情况下你的代码看起来像：

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

有一个纯粹的CSS解决scheme(CSS3)，如果你的div使用“样式”属性隐藏

div:not([style*="display: none"]):last-child{ /* bla */}

注意“display：”和“none”之间的空格，如果不能确切地说明属性中是否有空格，可以这样做：

div:not([style*="display:none"]):not([style*="display: none"]):last-child{ /* bla */}

jQuery是国王，但CSS3的解决scheme是上帝

我认为这是不可能的select一个CSS值(显示)

编辑：

在我看来，在这里使用一些jQuery是有意义的：

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

纯粹的JS解决scheme(例如，当你不使用jQuery或其他框架，而不想为此任务下载)：

A

B

C

D

E

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'; }

这个问题的真正答案是，你不能这样做。 替代CSS的答案不是这个问题的正确答案，但是如果JS解决scheme对你来说是可以接受的，那么你应该在这里select一个JS或者jQuery的答案。 但是，正如我上面所说的，真正的，正确的答案是，除非你愿意接受:not运算符，而[style*=display:none]在内联样式上工作，是一个整体差的解决scheme。

换句话说，你可以用javascript来做，在Jquery中你可以使用类似于：

$('div:visible').last()

*重新编辑

这是不可能的CSS，但是你可以用jQuery做到这一点。

JSFIDDLE DEMO

jQuery的：

$('li').not(':hidden').last().addClass("red");

HTML：

• Item 1
• Item 2
• Item 3
• Item 4

CSS：

.hideme { display:none; } .red { color: red; }

jQuery(以前的解决scheme)：

var $items = $($("li").get().reverse()); $items.each(function() { if ($(this).css("display") != "none") { $(this).addClass("red"); return false; } });

如果您可以使用内联样式，那么您可以纯粹使用CSS。

我使用这个在前一个元素可见时在下一个元素上做CSS：

div [style ='display：block;'] + table {

filter：blur(3px);

}