ตัวเลือก CSS เพื่อรับ div ล่าสุดที่มองเห็นได้

คำถามตัวเลือก 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คน)

คุณสามารถเลือกและจัดรูปแบบสิ่งนี้ด้วย JavaScript หรือ jQuery แต่ CSS เพียงอย่างเดียวไม่สามารถทำได้

ตัวอย่างเช่นหากคุณมีการใช้jQueryบนไซต์คุณสามารถทำได้:

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

แม้ว่าหวังว่าคุณจะมีคลาส / ID ล้อมรอบ div ที่คุณเลือกซึ่งในกรณีนี้รหัสของคุณจะเป็นดังนี้:

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

คำตอบที่แท้จริงสำหรับคำถามนี้คือคุณทำไม่ได้ ทางเลือกอื่นสำหรับคำตอบ CSS เท่านั้นไม่ใช่คำตอบที่ถูกต้องสำหรับคำถามนี้ แต่หากโซลูชัน JS เป็นที่ยอมรับของคุณคุณควรเลือกหนึ่งในคำตอบของ JS หรือ jQuery ที่นี่ อย่างไรก็ตามอย่างที่ฉันได้กล่าวไว้ข้างต้นคำตอบที่ถูกต้องคือคุณไม่สามารถทำสิ่งนี้ใน CSS ได้อย่างน่าเชื่อถือเว้นแต่คุณเต็มใจที่จะยอมรับ:notโอเปอเรเตอร์ที่มี[style*=display:none]ตัวเลือกที่ถูกทำให้ยุ่งเหยิงอื่น ๆ สารละลาย.

หากคุณสามารถใช้รูปแบบอินไลน์ได้คุณสามารถใช้ CSS ได้อย่างหมดจด

ฉันใช้สิ่งนี้เพื่อทำ CSS ในองค์ประกอบถัดไปเมื่อมองเห็นสิ่งก่อนหน้า:

div [style = 'display: block;'] + ตาราง {
  ตัวกรอง: เบลอ (3px);
}

ฉันคิดว่ามันเป็นไปไม่ได้ที่จะเลือกโดยค่า css (แสดง)

แก้ไข:

ในความคิดของฉันมันจะทำให้รู้สึกถึงการใช้ jQuery เล็กน้อยที่นี่:

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

โซลูชัน Pure 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>

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

ลอง

div: ไม่ใช่ ([style * = "display: none"])

ในทางกลับกันคุณสามารถทำได้ด้วย javascript ใน Jquery คุณสามารถใช้สิ่งต่อไปนี้:

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

* reedited

มันเป็นไปไม่ได้กับ 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;
    }

});

หากคุณไม่จำเป็นต้ององค์ประกอบ hided เพียงใช้แทนelement.remove()element.style.display = 'none';

สิ่งนี้ใช้ได้สำหรับฉัน

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