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

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

假设这是HTML布局：

<div></div>
<div></div>  
<div></div>  
<div style="display:none"></div>
<div style="display:none"></div>  

我想选择显示的最后一个

div

（即not

display:none

），这将是给定示例中的第三个

div

。

---

请注意，实际页面上的

div

s的数量可能不同（甚至

display:none

one）。

我认为不可能通过css值（display）进行选择

编辑：

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

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

---

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

例如，如果您已在站点上实施，您可以只执行以下操作：

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

虽然希望您在选择的div周围有一个类/ID，但在这种情况下，您的代码如下所示：

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

---

换句话说，你可以用javascript来实现， 在Jquery中，可以使用以下内容：

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

---

*重新编辑

使用CSS是不可能的，但是您可以使用jQuery执行此操作

jQuery:

$('li').not(':hidden').last().addClass("red");

<ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li class="hideme">Item 4</li>    
</ul>

.hideme {
    display:none;
}

.red {
    color: red;
}

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

$items.each(function() {

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

});

HTML:

$('li').not(':hidden').last().addClass("red");

<ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li class="hideme">Item 4</li>    
</ul>

.hideme {
    display:none;
}

.red {
    color: red;
}

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

$items.each(function() {

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

});

---

jQuery（以前的解决方案）：

$('li').not(':hidden').last().addClass("red");

<ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li class="hideme">Item 4</li>    
</ul>

.hideme {
    display:none;
}

.red {
    color: red;
}

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

$items.each(function() {

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

});

纯JS解决方案（例如，当您不使用jQuery或其他框架来处理其他事情，并且不想仅为此任务下载该框架时）：

A
B
C
D
E
var divs=document.getElementsByTagName（'div'）；
var last；
如有需要（分区）{
对于（变量i=0；i

---

这个问题的真正答案是，你做不到。 仅CSS答案的替代方案并不能正确回答这个问题，但如果您可以接受JS解决方案，那么您应该在这里选择一个JS或jQuery答案。

---

然而，正如我上面所说的，正确的答案是，除非您愿意接受带有

[style*=display:none]

的

:not

操作符和其他类似的否定选择器，它们只对内联样式有效，而且是一个总体上较差的解决方案，否则您无法在CSS中可靠地执行此操作。

如果您可以使用内联样式，然后你就可以完全用CSS来做了

当上一个元素可见时，我使用它在下一个元素上执行CSS：

div[style='display: block;'] + table { filter: blur(3px); } div[style='display:block；']+表格{ 过滤器：模糊（3px）； } 这对我有用

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

试一试

---

---

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

如果不再需要隐藏的元素，只需使用

element.remove（）

而不是

element.style.display='none'

问题明确地说不“JQuery CSS选择器”，说“CSS选择器”，这应该是可接受的答案=p这确实是原始问题的答案。提问者从未提及javascript或jquery，这些标签是由另一位回答者添加的。1infected-您真的想要jQuery吗？如果是这样的话，请在你的问题中实际说明这一点。否则，您应该接受这个答案。我认为jQuery对OP来说是可以接受的。毕竟，这是被接受的解决方案。Allllwaaayyyss jQuery的第一个答案是什么？这是对CSS问题的javascript回答。CSS！==javascript@dudewad当前位置请参见第一句的最后一部分：“但单凭CSS无法做到这一点。”答案可能就到此为止，别无选择。。。或者提供一个替代方案。但这个答案至少已经尽了它应有的努力，实际上表明CSS不能做被问到的事情（尽管它没有详细说明原因）。另一方面，一个在JavaScript解决方案中没有承认问题的CSS性质的答案值得批评。这是很多jQuery的

$（'li:visible:last'）。addClass（'red'）

。哈<代码>$（'li'）。不（':hidden'）.last（）.addClass（“红色”）谢谢你的代码片段，这是唯一一个非jQuery的回复！但是，当有多个父元素要应用时，这不起作用：-您能帮我为其他人构建一个有效的解决方案吗？我需要它，其他人需要它，所以请帮助：）我意识到这是一个旧的线程，但对于任何未来的访问者，你可以做一些事情，按照我想投票这只是b/c你放弃了jQuery-对你很好。我唯一的抱怨是div可以通过多种方式隐藏在视图之外，而不仅仅是基于style参数。Real quick:[1]宽度和高度可以设置为0，[2]变换比例可以设置为0，[3]，我们可以将其放置在可视区域之外。首先，我同意你的观点，但我确实认为使用

：not

操作符在某些情况下可以工作。例如，这非常适合我的情况，我有条件地隐藏元素，然后添加内联样式，因此您的解决方案实际上非常适合：）好吧，那么我猜什么可行：）我只是有点理想主义者，我喜欢强调事情不是最好的，区分什么是“黑客”和什么不是很重要，因为这会让我们都成为更好的程序员。是的，我听到了，我同意这个解决方案不应该被用作OP查询的css唯一解决方案，但我确实认为这在与JS结合使用时非常有效。你也可以使用css类来隐藏元素（而不是内联样式）。如果是这种情况，您也可以取消该隐藏类的选择器。这总是选择相同的隐藏内容，因为两者都由相同的CSS类设置。因此，您的答案方向正确，但不够远。：-）您没有回答问题，我将其更改为

[style*='display:block']

因为它可以有

display:block！important；

或者只是

：-）它在css文件中工作，就像这样

.btn group>.btn.d-none+.btn

（用于引导的输入组）“这个请求的一个问题是，作为一般原则，CSS只能根据以前的元素选择一个元素（ancesto）