:has เป็นตัวเลือกที่ไม่น่าให้อภัย

สิ่งเล็ก ๆ น้อย ๆ เกิดขึ้นระหว่างทางเผยแพร่ CSS :has() ผู้เลือก ไปที่ปูมหลังเก่า ฉันได้อธิบายไว้แต่แรกแล้ว :has() ในฐานะที่เป็นตัวเลือก "ให้อภัย" แนวคิดที่ว่าสิ่งใดก็ตามในอาร์กิวเมนต์จะได้รับการประเมิน แม้ว่าจะมีรายการใดรายการหนึ่งหรือมากกว่านั้นไม่ถูกต้องก็ตาม

/* Example: Do not use! */
article:has(h2, ul, ::-scoobydoo) { }

ดู ::scoobydoo ในนั้น? นั่นไม่ถูกต้องทั้งหมด รายการตัวเลือกที่ให้อภัยจะละเว้นตัวเลือกปลอมนั้นและดำเนินการประเมินรายการที่เหลือราวกับว่ามันเขียนดังนี้:

article:has(h2, ul) { }

:has() เป็นผู้เลือกที่ให้อภัย ในร่างฉบับก่อนหน้าลงวันที่ 7 พฤษภาคม 2022. แต่นั่นเปลี่ยนไป หลังจากมีการแจ้งปัญหา ว่าลักษณะการให้อภัยขัดแย้งกับ jQuery เมื่อ :has() มีตัวเลือกที่ซับซ้อน (เช่น header h2 + p). W3C มีมติให้ ทำ :has() ตัวเลือก "ไม่ให้อภัย" เมื่อไม่กี่สัปดาห์ก่อน

ตัวอย่างก่อนหน้านี้ของเรา? รายการตัวเลือกทั้งหมดไม่ถูกต้องเนื่องจากตัวเลือกปลอมไม่ถูกต้อง แต่อีกสองคนที่เลือกให้อภัย :is() และ :where(), ไม่เปลี่ยนแปลง

มีวิธีแก้ไขเล็กน้อยสำหรับเรื่องนี้ จดจำ, :is() และ  :where()ให้อภัยแม้ว่า :has() ไม่ใช่. ซึ่งหมายความว่าเราสามารถซ้อนตัวเลือกเหล่านี้ได้ :has() เพื่อรับพฤติกรรมการให้อภัยมากขึ้น:

article:has(:where(h2, ul, ::-scoobydoo)) { }

สิ่งที่คุณใช้อาจมีความสำคัญเนื่องจากความเฉพาะเจาะจงของ :is() ถูกกำหนดโดยรายการที่เฉพาะเจาะจงที่สุดในรายการ ดังนั้น หากคุณต้องการบางสิ่งที่เจาะจงน้อยกว่านี้ คุณควรเข้าถึงสิ่งนั้นดีกว่า :where() เนื่องจากไม่ได้เพิ่มคะแนนความเฉพาะเจาะจง

/* Specificity: (0,0,1) */
article:has(:where(h2, ul, ::-scoobydoo)) { } /* Specificity: (0,0,2) */
article:has(:is(h2, ul, ::-scoobydoo)) { }

เราอัปเดตโพสต์บางส่วนของเราเพื่อให้สอดคล้องกับข้อมูลล่าสุด ฉันเห็นคนอื่น ๆ มากมายที่จำเป็นต้องได้รับการอัปเดต ดังนั้น PSA เพียงเล็กน้อยสำหรับใครก็ตามที่ต้องทำเช่นเดียวกัน

• เนื้อหาที่ขับเคลื่อนด้วย SEO และการเผยแพร่ประชาสัมพันธ์ รับการขยายวันนี้
• เพลโตบล็อคเชน Web3 Metaverse ข่าวกรอง ขยายความรู้. เข้าถึงได้ที่นี่.
• ที่มา: https://css-tricks.com/has-is-an-unforgiving-selector/