ข้อผิดพลาดของมือใหม่ในตัวเลือกเซเลคเตอร์ของลูกหลาน

ดูตัวเลือกเซเลคเตอร์ต่อไปนี้:

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;
}

p .bbb {
	color: red;
}

.eee p.bbb {
	color: red;
}

.eee p .bbb {
	color: red;
}