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个。）

Answer 1

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

例如，如果您在网站上实施了jQuery，则可以执行以下操作：

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

虽然希望你选择的div包含一个类/ ID，但在这种情况下你的代码看起来像：

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

Answer 2

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

Answer 3

我认为不可能通过css值（显示）选择

编辑：

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

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

Answer 4

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

Answer 5

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

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

div[style='display: block;'] + table {
  filter: blur(3px);
}

Answer 6

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

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

*重新编辑

Answer 7

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（上一个解决方案）：

var $items = $($("li").get().reverse());

$items.each(function() {

    if ($(this).css("display") != "none") {
        $(this).addClass("red");
        return false;
    }

});

Answer 8

尝试

div：not（[style * =“ display：none”]）

Answer 9

如果您不再需要隐藏的元素，只需使用element.remove()代替element.style.display = 'none';。

Answer 10

这对我有用。

.alert:not(:first-child){
    margin: 30px;
}

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

10 个答案: