หาก HTML มีองค์ประกอบดังนี้:
id="product42"
id="product43"
...
ฉันจะจับคู่ id ทั้งหมดที่เริ่มต้นด้วย "ผลิตภัณฑ์" ได้อย่างไร
ฉันเคยเห็นคำตอบที่ใช้จาวาสคริปต์อย่างแน่นอน แต่จะทำอย่างไรกับ CSS เท่านั้น?
หาก HTML มีองค์ประกอบดังนี้:
id="product42"
id="product43"
...
ฉันจะจับคู่ id ทั้งหมดที่เริ่มต้นด้วย "ผลิตภัณฑ์" ได้อย่างไร
ฉันเคยเห็นคำตอบที่ใช้จาวาสคริปต์อย่างแน่นอน แต่จะทำอย่างไรกับ CSS เท่านั้น?
คำตอบ:
[id^=product]^=หมายถึง "เริ่มต้นด้วย" ตรงกันข้าม$=ระบุว่า "ลงท้ายด้วย"
สัญลักษณ์ที่ยืมมาจากไวยากรณ์ Regex โดยที่^และ$หมายถึง "start of string" และ "end of string" ตามลำดับ
ดูข้อกำหนดสำหรับข้อมูลเต็มรูปแบบ
productเป็นตัวระบุที่ถูกต้องอย่างชัดเจนดังนั้นจึงไม่จำเป็นต้องมีเครื่องหมายคำพูด
:not([id^=product])
ฉันต้องการทำสิ่งนี้:
[id^="product"] {
...
}
เป็นการดีที่ใช้คลาส นี่คือสิ่งที่ชั้นเรียนมีไว้สำหรับ:
<div id="product176" class="product"></div>
<div id="product177" class="product"></div>
<div id="product178" class="product"></div>
และตอนนี้ตัวเลือกจะกลายเป็น:
.product {
...
}
[id^=product]{property:value}ฉันสังเกตเห็นว่ามีตัวเลือก CSS อื่นที่ทำสิ่งเดียวกัน ไวยากรณ์มีดังนี้:
[id|="name_id"]สิ่งนี้จะเลือก ID องค์ประกอบทั้งหมดที่เริ่มต้นด้วยคำที่อยู่ในเครื่องหมายคำพูดคู่
att|=valatt^=valไม่ได้เช่นเดียวกับ จากการอ้างอิงที่กล่าวถึง: |=ตัวเลือก "หมายถึงองค์ประกอบที่มีแอตทริบิวต์ att ค่าของมันอาจเป็น" val "หรือเริ่มต้นด้วย" val " ตามด้วย" - "ทันที" ดังนั้น "รหัส 42" จะไม่ถูกจับคู่ด้วย|=แต่ "42 ผลิตภัณฑ์" จะ