2012-09-08 61 views
10

Tôi đã thấy một số câu hỏi tương tự về kiểu ghi đè với @import, mọi người đề xuất đặt @import ở dưới cùng, nhưng điều đó dường như không hoạt động ở đây.ghi đè kiểu css với @import không hoạt động

--- index.html --- 
<head> 
<link rel="stylesheet" href="style.css" /> 
</head> 
<body> 
This text should be green. 
</body> 

--- style.css --- 
body {color: red;} 
@import url('style-override.css'); 

--- style-override.css --- 
body {color: green;} 

Ví dụ trên sẽ ra đỏ văn bản, trong khi xanh được mong đợi.

  • Tuyên bố phong cách-override.css sau style.css trong đầu sẽ giải quyết vấn đề, nhưng tôi muốn sử dụng @import bên một file css.

  • Thêm ! Quan trọng trong style-override.css cũng sẽ nhận được kết quả mong đợi, nhưng đó không phải là cách hoạt động.

Bất cứ ai có thể giải thích điều này?

Trả lời

22

Điều đó không hoạt động vì bất kỳ quy tắc nhập nào được khai báo bên trong biểu định kiểu phải đến trước mọi thứ khác - nếu không, ... tốt, nó không hoạt động;).

Vì vậy, những gì bạn nên có trong stylesheet style.css của bạn là:

@import url('style-override.css'); 
body {color: red;} 
+0

OK, ngay cả khi @import được khai báo ở dưới cùng, nó sẽ được thực hiện trước tiên tôi đoán. Tôi thực sự chỉ đọc nó trên một trang web. Có vẻ như tuyên bố css bên trong đầu hoặc thêm vào quan trọng là những cách duy nhất. Cảm ơn. – user1643156

+0

Ồ vâng, rõ ràng. Tôi thậm chí không nghĩ về điều đó. Các quy tắc đã nhập vẫn được ghi đè, vì, trong trường hợp này 'body {color: red;}' xuất hiện sau. – banzomaikaka

12

@import quy tắc phải được đặt lên hàng đầu . Đây là những gì CSS spec. nói về nó:

Bất kỳ quy tắc @import phải đặt trước tất cả khác ở-quy tắc và các quy tắc phong cách trong một style sheet (ngoài @charset, mà phải là điều đầu tiên trong style sheet nếu nó tồn tại), hoặc quy tắc @import khác không hợp lệ.

Các vấn đề liên quan