html标签选择器只认最后一个,html - 获取最后一个可见di的CSS选择器

html - 获取最后一个可见di的CSS选择器

一个棘手的CSS选择器问题，不知道它是否可能。

让我们说这是HTML布局：

我想选择显示的最后一个div(即不是display:none)，这将是给定示例中的第三个div。请注意，真实页面上的div的数量可能不同(即使是display:none个)。

9个解决方案

52 votes

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

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

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

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

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

Surreal Dreams answered 2019-05-22T08:29:34Z

40 votes

如果使用“style”属性隐藏div，则有一个纯css解决方案(CSS3)

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

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

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

jQuery是王者，但CSS3解决方案是上帝

szanata answered 2019-05-22T08:30:16Z

9 votes

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

dudewad answered 2019-05-22T08:30:44Z

7 votes

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

编辑：

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

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

Guillaume86 answered 2019-05-22T08:31:25Z

6 votes

纯JS解决方案(例如，当你不使用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';

}

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

panther answered 2019-05-22T08:31:58Z

3 votes

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

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

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

filter: blur(3px);

}

Alex Grande answered 2019-05-22T08:32:33Z

2 votes

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

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

*重新编辑

eveevans answered 2019-05-22T08:33:07Z

2 votes

使用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(以前的解决方案)：

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

$items.each(function() {

if ($(this).css("display") != "none") {

$(this).addClass("red");

return false;

}

});

martynas answered 2019-05-22T08:33:53Z

-3 votes

这对我有用。

.alert:not(:first-child){

margin: 30px;

}

kmukku answered 2019-05-22T08:34:14Z