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

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

cssp.eee {
  color: red;
}

คุณควรรู้แล้วว่าตัวเลือกเซเลคเตอร์ดังกล่าวจะเลือก ย่อหน้าที่มีคลาส eee ตัวอย่างเช่น เหล่านี้:

html<p class="eee">
  lorem ipsum
</p>
<p class="eee">
  lorem ipsum
</p>

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

cssp .eee {
  color: green;
}

ตัวเลือกเซเลคเตอร์นี้แตกต่างจากตัวก่อนหน้าโดยที่ ระหว่างชื่อแท็กและชื่อคลาส มีช่องว่าง ช่องว่างนี้แสดงถึง ตัวเลือกเซเลคเตอร์ของลูกหลาน นั่นคือในกรณีนี้ เรากำลังเลือกองค์ประกอบทั้งหมดที่มีคลาส eee, ซึ่งอยู่ภายในย่อหน้า ตัวอย่างเช่น ตัวเลือกเซเลคเตอร์ นี้จะเลือกสแปนต่อไปนี้:

html<p>
  lorem <span class="eee">ipsum</span>
</p>
<p>
  lorem <span class="eee">ipsum</span>
</p>

ผลลัพธ์ของการรันโค้ด:

ดังนั้น อีกครั้ง: p.eee - ตัวเลือกเซเลคเตอร์ดังกล่าวเลือกย่อหน้าที่มีคลาส eee แต่ถ้าฉันทำเช่นนี้: p .eee ฉันจะเลือก องค์ประกอบทั้งหมดที่มีคลาส eee ซึ่งอยู่ ภายใน ย่อหน้า โปรดเข้าใจความแตกต่างนี้

Задание 1

บอกว่าตัวเลือกเซเลคเตอร์ในโค้ดด้านล่าง เลือกอะไร จากนั้นเขียนโค้ด HTML ที่เหมาะสม สำหรับตัวเลือกเซเลคเตอร์นี้ นี่คือโค้ดที่มีตัวเลือกเซเลคเตอร์:

cssp.bbb {
  color: red;
}

Задание 2

cssp .bbb {
  color: red;
}

Задание 3

css.eee p.bbb {
  color: red;
}

Задание 4

css.eee p .bbb {
  color: red;
}