Một bộ chọn CSS để có được div hiển thị cuối cùng

Một câu hỏi chọn CSS khó, không biết liệu nó có khả thi hay không.

Hãy nói rằng đây là cách bố trí HTML:

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

Tôi muốn chọn cái cuối cùng div, được hiển thị (nghĩa là không display:none) sẽ là cái thứ ba divtrong ví dụ đã cho. Xin lưu ý, số divs trên trang thực có thể khác nhau (ngay cả số s display:none).

Bạn có thể chọn và định kiểu này bằng JavaScript hoặc jQuery, nhưng CSS không thể làm điều này.

Ví dụ: nếu bạn đã triển khai jQuery trên trang web, bạn có thể thực hiện:

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

Mặc dù hy vọng bạn sẽ có một lớp / ID bao quanh các div bạn đang chọn, trong trường hợp đó, mã của bạn sẽ trông như sau:

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

Câu trả lời thực sự cho câu hỏi này là, bạn không thể làm điều đó. Các lựa chọn thay thế cho các câu trả lời chỉ dành cho CSS không phải là câu trả lời chính xác cho câu hỏi này, nhưng nếu các giải pháp JS được bạn chấp nhận, thì bạn nên chọn một trong các câu trả lời của JS hoặc jQuery tại đây. Tuy nhiên, như tôi đã nói ở trên, câu trả lời đúng, chính xác là bạn không thể thực hiện điều này trong CSS một cách đáng tin cậy trừ khi bạn sẵn sàng chấp nhận :nottoán tử với [style*=display:none]các bộ chọn phủ định như vậy, chỉ hoạt động trên các kiểu nội tuyến và nói chung là kém giải pháp.

Nếu bạn có thể sử dụng các kiểu nội tuyến, thì bạn có thể làm điều đó hoàn toàn với CSS.

Tôi đang sử dụng điều này để thực hiện CSS trên phần tử tiếp theo khi phần trước xuất hiện:

div [style = 'display: block;'] + bảng {
  bộ lọc: làm mờ (3px);
}

Tôi nghĩ rằng không thể chọn theo giá trị css (hiển thị)

biên tập:

theo ý kiến ​​của tôi, sẽ có ý nghĩa khi sử dụng một chút jquery ở đây:

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

Giải pháp thuần túy (ví dụ: khi bạn không sử dụng jQuery hoặc khung công tác khác cho những thứ khác và không muốn tải xuống chỉ cho nhiệm vụ này):

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

Thử

div: không ([style * = "display: none"])

theo cách khác, bạn có thể làm điều đó với javascript, trong Jquery bạn có thể sử dụng một cái gì đó như:

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

* sậy

CSS không thể thực hiện được, tuy nhiên bạn có thể làm điều này với jQuery.

NHU CẦU 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 (giải pháp trước):

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

$items.each(function() {

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

});

Nếu bạn không còn cần các yếu tố ẩn, chỉ cần sử dụng element.remove()thay vì element.style.display = 'none';.

Điều này làm việc cho tôi.

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