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

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

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

กฎข้อแรก

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

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

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

Результат:

กฎข้อที่สอง

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

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

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

Результат:

กฎข้อที่สาม

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

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

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

Результат:

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

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

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

Результат: