一个CSSselect器来获取最后一个可见的div
一个棘手的CSSselect器问题，不知道是否可能。
可以说这是HTML布局：
<div></div> <div></div> <div></div> <div style="display:none"></div> <div style="display:none"></div> 我想select显示的最后一个div （即不display:none ），这将是给定示例中的第三个div 。 请注意，真实页面上div的数量可能不同（甚至display:none ）。
你可以用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或其他框架，而不想为此任务下载）：
<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的答案不是这个问题的正确答案，但是如果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：
<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（以前的解决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）;
}
