ฉันจะเลือกลูกทั้งหมดขององค์ประกอบยกเว้นลูกคนสุดท้ายได้อย่างไร

ฉันจะเลือกทั้งหมดยกเว้นลูกคนสุดท้ายที่ใช้ตัวเลือก CSS3 ได้อย่างไร

div:nth-last-child(1)ยกตัวอย่างเช่นจะได้รับเพียงเด็กที่ผ่านมาจะเป็น

คุณสามารถใช้คลาสเนชั่น:not()เนกาทีฟกับคลาส:last-childหลอกได้ มีการแนะนำ CSS Selectors ระดับ 3 มันไม่ทำงานใน IE8 หรือต่ำกว่า:

:not(:last-child) { /* styles */ }

ทำให้มันง่าย:

คุณสามารถนำสไตล์ของคุณไปใช้กับ div ทั้งหมดและเริ่มต้นใหม่ด้วย: - ลูกสุดท้าย :

เช่นในCSS :

.yourclass{
    border: 1px solid blue;
}
.yourclass:last-child{
    border: 0;
}

หรือในSCSS :

.yourclass{
    border: 1px solid rgba(255, 255, 255, 1);
    &:last-child{
        border: 0;
    }
}

• ง่ายต่อการอ่าน / จำ
• รวดเร็วในการดำเนินการ
• รองรับเบราว์เซอร์ (IE9 + เนื่องจากยังคงเป็น CSS3)

โซลูชันของ Nick Craver ทำงานได้ แต่คุณสามารถใช้สิ่งนี้ได้:

:nth-last-child(n+2) { /* Your code here */ }

Chris Coyier จาก CSS Tricks ทำได้ดีมาก: ผู้ทดสอบคนนี้

เมื่อ IE9 มาถึงมันจะง่ายขึ้น แม้ว่าจะมีเวลามากคุณสามารถเปลี่ยนปัญหาเป็นสิ่งที่ต้องการ: ลูกคนแรกและจัดรูปแบบด้านตรงข้ามขององค์ประกอบ (IE7 +)

การใช้โซลูชัน Nick craver พร้อมselectivizrทำให้สามารถใช้โซลูชันเบราว์เซอร์ข้าม (IE6 +)

เพื่อค้นหาองค์ประกอบจากการใช้งานล่าสุด

<style>
ul li:nth-last-of-type(3n){ color:#a94442}  /**/
</style>

โซลูชันของ Nick Craver ให้สิ่งที่ฉันต้องการ แต่เพื่อให้ชัดเจนสำหรับผู้ที่ใช้ CSS-in-JS:

const styles = {
  yourClass: {
    /* Styles for all elements with this class */
    '&:not(:last-child)': {
      /* Styles for all EXCEPT the last element with this class */
    },
  },
};

.nav-menu li:not(:last-child){
    // write some style here
}

รหัสนี้ควรใช้กับทุกสไตล์