เป็นไปได้ไหมที่จะเลือก n รายการสุดท้ายด้วยลูกที่ n

ใช้รายการมาตรฐานฉันกำลังพยายามเลือก 2 รายการสุดท้าย ฉันมีการเรียงสับเปลี่ยนต่างๆAn+Bแต่ดูเหมือนจะไม่มีอะไรให้เลือก 2 รายการสุดท้าย:

li:nth-child(n+2) {} /* selects from the second onwards */
li:nth-child(n-2) {} /* selects everything */
li:nth-child(-n+2) {} /* selects first two only */
li:nth-child(-n-2) {} /* selects nothing */

ฉันทราบถึงตัวเลือก CSS3 ใหม่ที่ต้องการ:nth-last-child()แต่ฉันต้องการสิ่งที่ทำงานในเบราว์เซอร์อื่น ๆ อีกสองสามตัวถ้าเป็นไปได้ (อย่าสนใจ IE เป็นพิเศษ)

สิ่งนี้จะเลือกสอง iems สุดท้ายของรายการ:

li:nth-last-child(-n+2) {color:red;}

<ul>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
</ul>

nth-last-childดูเหมือนได้รับการออกแบบมาโดยเฉพาะเพื่อแก้ปัญหานี้ดังนั้นฉันจึงสงสัยว่ามีทางเลือกอื่นที่เข้ากันได้มากกว่านี้หรือไม่ รูปลักษณ์การสนับสนุนแม้ว่าค่อนข้างดี

:nth-last-child(-n+2) ควรทำเคล็ดลับ

เนื่องจากคำจำกัดความของความหมายของnth-childฉันไม่เห็นว่าสิ่งนี้เป็นไปได้อย่างไรหากไม่รวมความยาวของรายการองค์ประกอบที่เกี่ยวข้อง จุดสำคัญของความหมายคือการอนุญาตให้แยกกลุ่มขององค์ประกอบลูกออกเป็นกลุ่มที่ทำซ้ำได้ ( แก้ไข - ขอบคุณ BoltClock) หรือเป็นส่วนแรกของความยาวคงที่ตามด้วย "ส่วนที่เหลือ" คุณต้องการสิ่งที่ตรงกันข้ามกับสิ่งนั้นซึ่งเป็นสิ่งที่nth-last-childให้คุณ

หากคุณใช้ jQuery ในโปรเจ็กต์ของคุณหรือยินดีที่จะรวมไว้คุณสามารถเรียกใช้nth-last-childผ่าน API ตัวเลือก (นี่คือการจำลองที่จะข้ามเบราว์เซอร์) นี่คือลิงค์ไปยังnth-last-childปลั๊กอิน หากคุณใช้วิธีนี้ในการกำหนดเป้าหมายองค์ประกอบที่คุณสนใจ:

$('ul li:nth-last-child(1)').addClass('last');

จากนั้นจัดสไตล์คลาสอีกครั้งlastแทนตัวเลือกnth-childหรือnth-last-childหลอกคุณจะได้รับประสบการณ์ข้ามเบราว์เซอร์ที่สอดคล้องกันมากขึ้น