Trong CSS, display: block; được ưu tiên hơn các giá trị khác khi nó được định nghĩa trong một quy tắc có độ cụ thể (specificity) cao hơn hoặc được khai báo sau trong mã nguồn. Độ ưu tiên này là một phần của quy tắc xếp tầng CSS (CSS cascade).

Dưới đây là các phương pháp để đảm bảo display: block; được ưu tiên:

1. Tăng Độ Đặc Hiệu (Specificity)

Độ đặc hiệu là một hệ thống điểm mà trình duyệt sử dụng để quyết định quy tắc CSS nào được áp dụng cho một phần tử. Quy tắc có điểm cao hơn sẽ được ưu tiên.

  • Sử dụng ID: ID (#) có độ đặc hiệu rất cao.

    CSS
    #my-element {
    display: block;
}

  • Sử dụng Class hoặc Thuộc tính: Class (.) hoặc thuộc tính ([attribute]) có độ đặc hiệu cao hơn thẻ HTML.

    CSS
    .my-class {
    display: block;
}

  • Kết hợp các bộ chọn: Kết hợp nhiều bộ chọn để tăng độ đặc hiệu.

    CSS
    div.my-container p.my-text {
    display: block;
}

2. Sử dụng Thứ Tự Khai Báo (Source Order)

Nếu hai quy tắc CSS có cùng độ đặc hiệu, quy tắc được khai báo sau trong file CSS sẽ được áp dụng.

CSS
/* Quy tắc này có thể bị ghi đè */
p {
    display: inline;
}

/* Quy tắc này sẽ được ưu tiên vì nó đứng sau */
p {
    display: block;
}

3. Sử dụng !important

Đây là cách mạnh mẽ nhất để ghi đè mọi quy tắc khác, nhưng bạn nên hạn chế sử dụng nó vì nó làm cho mã CSS khó quản lý và gỡ lỗi. !important sẽ ghi đè cả độ đặc hiệu và thứ tự khai báo.

CSS
.my-element {
    display: block !important;
}

Lời khuyên

Cách tốt nhất để ưu tiên một quy tắc CSS là sử dụng độ đặc hiệu cao hơn một cách có chủ ý. Chỉ sử dụng !important trong những trường hợp thật sự cần thiết, như khi ghi đè các style từ thư viện bên ngoài mà không thể chỉnh sửa mã nguồn của chúng.