39. Specificity trong CSS

Specificity trong CSS: Specificity (độ cụ thể) trong CSS là một khái niệm quan trọng để xác định xem khi có nhiều quy tắc CSS áp dụng cho cùng một phần tử, quy tắc nào sẽ có ưu tiên hơn và được áp dụng.

Specificity được tính bằng cách đếm số đơn vị cụ thể trong một chọn lựa. Các đơn vị cụ thể bao gồm số lượng id selectors, số lượng class selectors và số lượng element selectors.

Quy tắc đơn giản để hiểu cách tính specificity là:

• Mỗi id selector tăng giá trị specificity lên 100.
• Mỗi class selector hoặc pseudo-class selector tăng giá trị specificity lên 10.
• Mỗi element selector hoặc pseudo-element selector tăng giá trị specificity lên 1.

Ví dụ:

• #header .title có giá trị specificity là 110 (1 id + 1 class).
• body p có giá trị specificity là 11 (2 element selectors).
• .menu li a có giá trị specificity là 21 (3 class selectors).

Khi xảy ra xung đột giữa các quy tắc với giá trị specificity khác nhau, quy tắc có giá trị specificity cao hơn sẽ được ưu tiên áp dụng. Nếu có hai quy tắc có cùng giá trị specificity, quy tắc nằm sau trong tệp CSS sẽ được áp dụng.

Ví dụ:

HTML:

html

<div id="myDiv" class="myClass">Hello, World!</div>

CSS:

css

#myDiv {
  color: red; /* Specificity: 100 */
}

.myClass {
  color: blue; /* Specificity: 10 */
}

div {
  color: green; /* Specificity: 1 */
}

Trong ví dụ này, mặc dù .myClass và div đều áp dụng màu sắc, nhưng #myDiv có giá trị specificity cao hơn, nên màu sắc của nó (màu đỏ) sẽ được áp dụng cho phần tử có id “myDiv”.