ซีเลกเตอร์ตามบริบทใน CSS

ซีเลกเตอร์ตามบริบทซึ่งแสดงด้วย คำสั่งช่องว่าง (' ') ช่วยให้สามารถเลือก แท็กที่ซ้อนอยู่ในผู้ปกครองที่กำหนดได้

ไวยากรณ์

cssselector1 selector2 {
  
}

ตัวอย่าง

มาถึงแท็ก p ทั้งหมด ภายในแท็ก div และเปลี่ยนสี เป็นสีแดง:

html<div>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

cssdiv p {
  color: red;
}

Результат:

ตัวอย่าง

มาถึงแท็ก p ทั้งหมด ภายในองค์ประกอบที่มี #elem และเปลี่ยนสี เป็นสีแดง:

html<div id="elem">
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

css#elem p {
  color: red;
}

Результат:

ตัวอย่าง

มาถึงแท็ก p ทั้งหมด ภายในองค์ประกอบที่มีคลาส .block และเปลี่ยนสีเป็นสีแดง:

html<div class="block">
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

css.block p {
  color: red;
}

Результат:

ตัวอย่าง

มาถึงแท็ก b ทั้งหมด ภายในแท็ก p ซึ่งอยู่ภายใน แท็ก div และเปลี่ยนสีเป็นสีแดง:

html<div>
  <p>
    text <b>+</b>
  </p>
</div>

cssdiv p b {
  color: red;
}

Результат:

ดูเพิ่มเติม