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

一个棘手的 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)。

226397 次浏览
小开

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

编辑:

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

$('#your_container > div:visible:last').addClass('last-visible-div');
小开
最佳答案

您可以使用 JavaScript 或 jQuery 来选择和设置样式，但是单独的 CSS 不能做到这一点。

例如，如果你在网站上实现了 JQuery，你只需要做:

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

尽管希望在选择的 div 周围有一个 class/ID，在这种情况下，代码应该是这样的:

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

另一方面，你也可以用 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 (上一个解决方案) :

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


$items.each(function() {


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


});
小开

纯 JS 解决方案(例如，当你不使用 jQuery 或其他框架来处理其他事情，并且不想仅仅为了这个任务而下载这个框架时) :

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';
}
<div>A</div>
<div>B</div>
<div>C</div>
<div style="display:none">D</div>
<div style="display:none">E</div>

外部链接

小开

这个问题的真正答案是，你做不到。 对于这个问题，只使用 CSS 的答案并不是正确的答案，但是如果您可以接受 JS 解决方案，那么您应该在这里选择一个 JS 或 jQuery 答案。 然而，正如我上面所说，真正正确的答案是 你不能可靠地在 CSS 中做到这一点，除非你愿意接受带有 [style*=display:none]和其他否定选择符的 :not操作符，这种操作符只适用于行内样式，而且总体上是一个糟糕的解决方案。

小开

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

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

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

这招对我很管用。

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

试试看

Not ([ style * = “ display: none”]) : last-child

小开

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

小开

为了完整起见，我使用纯 css 和 :has操作符解决了这个问题。

在你的例子中，你会有以下规则: div:has(+ div[style*="display:none"] 它将选择具有具有 display:none样式规则的直接兄弟节点条件的所有节点。

div > div:has(+ div[style*="display:none"]),
div > div:last-child {
background: red;
color: white;
}
<h3>Example 1 :</h3>
<div>
<div>A</div>
<div>B</div>
<div>C</div>
<div style="display:none">D</div>
<div style="display:none">E</div>
</div>
<h3>Example 2 :</h3>
<div>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
</div>

div:last-child只是用来支持所有块都可见的情况，因此没有兄弟姐妹，但是我们还是想应用 css 规则。

请注意，它只能工作，因为您的隐藏 div 是兄弟姐妹。


提交答案