Ý nghĩa quan trọng trong CSS là gì?


409

Không gì !importantcó ý nghĩa trong CSS?

Nó có sẵn trong CSS 2 không? CSS 3?

Nó được hỗ trợ ở đâu? Tất cả các trình duyệt hiện đại?



17
... Một cái gì đó để tránh bất cứ khi nào có thể.
Scott

Câu trả lời:


400

Nó có nghĩa là, về cơ bản, những gì nó nói; rằng 'điều này rất quan trọng, bỏ qua các quy tắc tiếp theo và bất kỳ vấn đề cụ thể thông thường nào, hãy áp dụng quy tắc này !'

Trong sử dụng bình thường, một quy tắc được xác định trong biểu định kiểu bên ngoài được ghi đè bằng một kiểu được xác định trong headtài liệu, do đó, được ghi đè bằng kiểu trong dòng trong chính phần tử (giả sử tính đặc hiệu bằng nhau của các bộ chọn). Xác định quy tắc với !important'thuộc tính' (?) Loại bỏ các mối quan tâm thông thường liên quan đến quy tắc 'sau này' ghi đè lên quy tắc 'trước đó'.

Ngoài ra, thông thường, một quy tắc cụ thể hơn sẽ ghi đè lên quy tắc ít cụ thể hơn. Vì thế:

a {
    /* css */
}

Thường được ghi đè bởi:

body div #elementID ul li a {
    /* css */
}

Vì bộ chọn sau cụ thể hơn (và thông thường, không có vấn đề gì khi tìm thấy bộ chọn cụ thể hơn (trong biểu headđịnh kiểu bên ngoài), nó sẽ vẫn ghi đè lên bộ chọn ít cụ thể hơn (thuộc tính kiểu trong dòng sẽ luôn luôn ghi đè 'thêm-' hoặc 'ít-', bộ chọn cụ thể vì nó luôn cụ thể hơn.

Tuy nhiên, nếu bạn thêm !importantvào khai báo CSS của bộ chọn ít cụ thể hơn, nó sẽ được ưu tiên.

Sử dụng !importantcó mục đích của nó (mặc dù tôi đấu tranh để nghĩ về chúng), nhưng nó giống như sử dụng vụ nổ hạt nhân để ngăn chặn những con cáo giết gà của bạn; vâng, những con cáo sẽ bị giết, nhưng những con gà cũng vậy. Và khu phố.

Nó cũng làm cho việc gỡ lỗi CSS của bạn trở thành một cơn ác mộng (từ kinh nghiệm cá nhân, theo kinh nghiệm).


253
Nó cũng gây nhầm lẫn cho nhiều nhà phát triển vì trong nhiều ngôn ngữ lập trình tiền tố! có nghĩa là không .
rustyx

19
Một mục đích quan trọng sẽ là trong tập lệnh GreasMonkey nơi bạn cố tình ghi đè CSS của người khác có khả năng cụ thể hơn CSS của bạn.
Noumenon

1
Chính thức W3 gọi đó là "quy tắc".
JD Smith

5
ít nhất nó không mỉa mai và nói important!(quan trọng KHÔNG)
user3553260

2
Bạn đã viết: 'Trong sử dụng bình thường, một quy tắc được xác định trong biểu định kiểu bên ngoài bị ghi đè bởi một kiểu được xác định trong phần đầu của tài liệu'. Đó là sai.
jlguenego

130

Quy tắc quan trọng! Là một cách để tạo tầng CSS của bạn nhưng cũng có các quy tắc bạn cảm thấy quan trọng nhất luôn được áp dụng. Một quy tắc có thuộc tính! Quan trọng sẽ luôn được áp dụng cho dù quy tắc đó xuất hiện ở đâu trong tài liệu CSS.

Vì vậy, nếu bạn có những điều sau đây:

.class {
   color:red !important;
}
.outerClass .class {
   color:blue;
}

quy tắc quan trọng sẽ được áp dụng (không tính cụ thể )

Tôi tin rằng đã !importantxuất hiện trong CSS1 vì vậy mọi trình duyệt đều hỗ trợ nó (IE4 đến IE6 với triển khai một phần, IE7 + đầy đủ)

Ngoài ra, đó là thứ bạn không muốn sử dụng khá thường xuyên, bởi vì nếu bạn làm việc với người khác, bạn có thể ghi đè lên các thuộc tính khác.


1
IE4 +, thực sự, có lỗi, lên đến và bao gồm 6.
BoltClock

15
Sự nhầm lẫn xảy ra như !là một biểu tượng cho KHÔNG trong một số ngôn ngữ nhưng giờ nó đã rõ ràng hơn.
Si8

2
Tôi đặc biệt vui mừng khi bạn bao gồm cú pháp để sử dụng !important. CSS đủ khác biệt so với các ngôn ngữ khác khiến bạn dễ quên cách sử dụng một số thứ nhất định.
blainarmstrong

3
@ Si8 - Vâng, vì sự nhầm lẫn đó, tôi đã luôn nghĩ rằng "họ" nên đã định nghĩa nó là important!, hoặc có thể IMPORTANT!, hơn là !important. Tôi tự hỏi liệu có ai (có thể đọc cái này) biết tại sao họ định nghĩa nó với dấu câu ở phía trước không? Rõ ràng, bây giờ đã quá muộn để thay đổi nó.
Kevin Fegan

22

!important là một phần của CSS1.

Các trình duyệt hỗ trợ nó: IE5.5 +, Firefox 1+, Safari 3+, Chrome 1+.

Nó có nghĩa là, một cái gì đó như:

Sử dụng tôi, nếu không có gì quan trọng khác xung quanh!

Không thể nói nó tốt hơn.


5
!importantkhông giới hạn chỉ với Safari 3+; nó đã hỗ trợ nó ngay từ đầu như tất cả các trình duyệt không phải IE khác. IE hiểu nó từ phiên bản 4 trở đi, nhưng nó chỉ hỗ trợ nó không có lỗi bắt đầu từ phiên bản 7.
BoltClock

12

Nó được sử dụng để tác động đến việc sắp xếp theo tầng CSS khi sắp xếp theo nguồn gốc. Nó không có gì để làm với tính cụ thể như được nêu ở đây trong các câu trả lời khác.

Đây là mức độ ưu tiên từ thấp nhất đến cao nhất:

  1. kiểu trình duyệt
  2. khai báo bảng kiểu người dùng (không có! quan trọng)
  3. tờ khai phong cách tác giả (không có! quan trọng)
  4. ! tờ phong cách tác giả quan trọng
  5. ! tờ phong cách người dùng quan trọng

Sau khi tính đặc hiệu đó diễn ra cho các quy tắc vẫn có một ngón tay trong chiếc bánh.

Người giới thiệu:


Như @ fabian-barney đã chỉ ra !importantlà một công cụ sửa đổi cho thứ tự xếp tầng developer.mozilla.org/en-US/docs/Web/CSS/Cascade (xem bảng để tham khảo).
Doomjunky

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.