ข้อผิดพลาดของมือใหม่ในตัวเลือกเซเลคเตอร์ของลูกหลาน
ดูตัวเลือกเซเลคเตอร์ต่อไปนี้:
p.eee {
color: red;
}
คุณควรรู้แล้วว่าตัวเลือกเซเลคเตอร์ดังกล่าวจะเลือก
ย่อหน้าที่มีคลาส eee ตัวอย่างเช่น เหล่านี้:
<p class="eee">
lorem ipsum
</p>
<p class="eee">
lorem ipsum
</p>
ตอนนี้ดูตัวเลือกเซเลคเตอร์นี้:
p .eee {
color: green;
}
ตัวเลือกเซเลคเตอร์นี้แตกต่างจากตัวก่อนหน้าโดยที่
ระหว่างชื่อแท็กและชื่อคลาส
มีช่องว่าง ช่องว่างนี้แสดงถึง
ตัวเลือกเซเลคเตอร์ของลูกหลาน นั่นคือในกรณีนี้
เรากำลังเลือกองค์ประกอบทั้งหมดที่มีคลาส eee,
ซึ่งอยู่ภายในย่อหน้า ตัวอย่างเช่น ตัวเลือกเซเลคเตอร์
นี้จะเลือกสแปนต่อไปนี้:
<p>
lorem <span class="eee">ipsum</span>
</p>
<p>
lorem <span class="eee">ipsum</span>
</p>
ผลลัพธ์ของการรันโค้ด:
ดังนั้น อีกครั้ง: p.eee - ตัวเลือกเซเลคเตอร์ดังกล่าวเลือกย่อหน้าที่มีคลาส
eee แต่ถ้าฉันทำเช่นนี้: p .eee ฉันจะเลือก
องค์ประกอบทั้งหมดที่มีคลาส eee ซึ่งอยู่ ภายใน ย่อหน้า
โปรดเข้าใจความแตกต่างนี้
บอกว่าตัวเลือกเซเลคเตอร์ในโค้ดด้านล่าง เลือกอะไร จากนั้นเขียนโค้ด HTML ที่เหมาะสม สำหรับตัวเลือกเซเลคเตอร์นี้ นี่คือโค้ดที่มีตัวเลือกเซเลคเตอร์:
p.bbb {
color: red;
}
บอกว่าตัวเลือกเซเลคเตอร์ในโค้ดด้านล่าง เลือกอะไร จากนั้นเขียนโค้ด HTML ที่เหมาะสม สำหรับตัวเลือกเซเลคเตอร์นี้ นี่คือโค้ดที่มีตัวเลือกเซเลคเตอร์:
p .bbb {
color: red;
}
บอกว่าตัวเลือกเซเลคเตอร์ในโค้ดด้านล่าง เลือกอะไร จากนั้นเขียนโค้ด HTML ที่เหมาะสม สำหรับตัวเลือกเซเลคเตอร์นี้ นี่คือโค้ดที่มีตัวเลือกเซเลคเตอร์:
.eee p.bbb {
color: red;
}
บอกว่าตัวเลือกเซเลคเตอร์ในโค้ดด้านล่าง เลือกอะไร จากนั้นเขียนโค้ด HTML ที่เหมาะสม สำหรับตัวเลือกเซเลคเตอร์นี้ นี่คือโค้ดที่มีตัวเลือกเซเลคเตอร์:
.eee p .bbb {
color: red;
}