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

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

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

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

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

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

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

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

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