Html 用于获取最后一个可见 div 的 CSS 选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5275098/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
A CSS selector to get last visible div
提问by Vishal Shah
A tricky CSS selector question, don't know if it's even possible.
一个棘手的 CSS 选择器问题，不知道是否可能。
Lets say this is the HTML layout:
假设这是 HTML 布局：
<div></div>
<div></div>
<div></div>
<div style="display:none"></div>
<div style="display:none"></div>
I want to select the last div, which is displayed (ie. not display:none) which would be the third divin the given example.
Mind you, the number of divs on the real page can differ (even the display:noneones).
我想选择div显示的最后一个（即不是display:none），这将是div给定示例中的第三个。请注意，div真实页面上的 s数量可能不同（甚至是不同display:none的）。
采纳答案by Surreal Dreams
You could select and style this with JavaScript or jQuery, but CSS alone can't do this.
您可以使用 JavaScript 或 jQuery 来选择和设置样式，但仅靠 CSS 无法做到这一点。
For example, if you have jQueryimplemented on the site, you could just do:
例如，如果您在网站上实现了jQuery，您可以这样做：
var last_visible_element = $('div:visible:last');
Although hopefully you'll have a class/ID wrapped around the divs you're selecting, in which case your code would look like:
尽管希望您在选择的 div 周围有一个类/ID，但在这种情况下，您的代码将如下所示：
var last_visible_element = $('#some-wrapper div:visible:last');
回答by dudewad
The real answer to this question is, you can't do it.
Alternatives to CSS-only answers are not correct answers to this question, but if JS solutions are acceptable to you, then you should pick one of the JS or jQuery answers here.
However, as I said above, the true, correct answer is that you cannot do this in CSS reliablyunless you're willing to accept the :notoperator with the [style*=display:none]and other such negated selectors, which only works on inline styles, and is an overall poor solution.
这个问题的真正答案是，你做不到。仅 CSS 答案的替代方案不是此问题的正确答案，但如果您可以接受 JS 解决方案，那么您应该在此处选择 JS 或 jQuery 答案之一。然而，正如我上面所说的，真正正确的答案是你不能在 CSS 中可靠地做到这一点，除非你愿意接受:not带有 the[style*=display:none]和其他此类否定选择器的运算符，这些选择器仅适用于内联样式，并且总体上很差解决方案。
回答by Alex Grande
If you can use inline styles, then you can do it purely with CSS.
如果您可以使用内联样式，那么您可以完全使用 CSS 来实现。
I am using this for doing CSS on the next element when the previous one is visible:
当前一个元素可见时，我正在使用它在下一个元素上执行 CSS：
div[style='display: block;'] + table {
filter: blur(3px);
}
回答by Guillaume86
I think it's not possible to select by a css value (display)
我认为无法通过 css 值（显示）进行选择
edit:
编辑：
in my opinion, it would make sense to use a bit of jquery here:
在我看来，在这里使用一些 jquery 是有意义的：
$('#your_container > div:visible:last').addClass('last-visible-div');
回答by panther
Pure JS solution (eg. when you don't use jQuery or another framework to other things and don't want to download that just for this task):
纯 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>
回答by Tyler Wayne
Try
尝试
div:not([style*="display: none"])
div:not([style*="display: none"])
回答by eveevans
in other way, you can do it with javascript , in Jquery you can use something like:
换句话说，您可以使用 javascript 来完成，在 Jquery 中您可以使用以下内容：
$('div:visible').last()
*reedited
*重新编辑
回答by martynas
It is not possible with CSS, however you could do this with jQuery.
使用 CSS 是不可能的，但是您可以使用 jQuery 做到这一点。
jQuery:
jQuery：
$('li').not(':hidden').last().addClass("red");
HTML:
HTML：
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="hideme">Item 4</li>
</ul>
CSS:
CSS：
.hideme {
display:none;
}
.red {
color: red;
}
jQuery (previous solution):
jQuery（以前的解决方案）：
var $items = $($("li").get().reverse());
$items.each(function() {
if ($(this).css("display") != "none") {
$(this).addClass("red");
return false;
}
});
回答by Masoud Shariati
If you no longer need the hided elements, just use element.remove()instead of element.style.display = 'none';.
如果您不再需要隐藏的元素，只需使用element.remove()代替element.style.display = 'none';。
回答by kmukku
This worked for me.
这对我有用。
.alert:not(:first-child){
margin: 30px;
}
