ลำดับความสำคัญของตัวเลือก CSS ที่เป็นลูกหลาน

ในบทเรียนก่อนหน้าทั้งหมด ตัวเลือกทั้งหมด ต้องจับองค์ประกอบนั้นโดยตรง อาจมีกรณีที่ ตัวเลือกหนึ่งจับองค์ประกอบ และตัวเลือกที่สอง จับผู้ปกครองขององค์ประกอบนั้น

คุณรู้แล้วว่าหากกำหนดสีให้กับผู้ปกครอง เช่น สีนั้นจะถูกลูกหลานสืบทอด แต่หากกำหนดสีให้กับลูกหลานด้วย ตัวเลือก ของลูกหลานจะมีความสำคัญมากกว่า ตัวเลือกของผู้ปกครอง

ซึ่งหมายความว่าตัวเลือกแท็กของลูกหลานจะชนะ คลาสของผู้ปกครอง:

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

css.block {
  color: red;
}
p {
  color: green; /* สีนี้จะถูกใช้ */
}

Результат:

ตัวเลือกแท็กของลูกหลานยังชนะตัวระบุ ของผู้ปกครอง:

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

css#block {
  color: red;
}
.text {
  color: green; /* สีนี้จะถูกใช้ */
}

Результат: