กฎความเฉพาะเจาะจงใน CSS

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

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

กฎข้อแรก

คลาสจะชนะตัวเลือกแท็กเสมอ:

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

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

กฎข้อที่สอง

รหัสเฉพาะ (ID) จะชนะคลาสเสมอ:

<p id="elem" class="text">text</p>

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

กฎข้อที่สาม

ภายใต้เงื่อนไขที่เท่ากัน ตัวเลือกที่ชนะคือตัวเลือก ที่มีส่วนประกอบมากกว่า ตัวอย่างเช่น ถ้า เรามีตัวเลือกแท็กสองตัว ตัวที่ชนะคือตัว ที่มีแท็กมากกว่า:

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

p {
	color: red;
}
div p {
	color: green; /* สีนี้จะถูกนำไปใช้ */
}

ถ้าเป็นตัวเลือกคลาสสองตัว ตัวที่ชนะคือตัว ที่มีคลาสระบุไว้มากกว่า (หากในนั้น มีตัวเลือกแท็ก พวกมันจะไม่มีผล):

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

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