Thứ tự của các quy tắc trong một tệp css đơn có quan trọng không?

Question

Thứ tự của các quy tắc trong một tệp css có tạo sự khác biệt không?

<div id="wrapper> 
    <div id="a> 
     section a 
    </div> 
    <div id="b> 
     section b 
    </div> 
    <div id="c> 
     section c 
    </div> 
</div> 

Quy tắc div có thể cho #c cần dưới #a và #b hoặc rõ ràng: cả hai không hoạt động?

#wrapper { 
color: #CCC; 
} 

#c { 
clear:both 
} 

#a { 
float: right; 
} 

#b { 
float: left; 
} 

Answer 1

Trong trường hợp các quy tắc cụ thể như nhau áp dụng cho cùng một yếu tố, thì quy tắc sau sẽ thắng.

Nếu bạn có phong cách:

.foo { color: red; } 
.bar { color: blue; } 

Và đánh dấu:

<div class="foo bar">Test</div> 

Sau đó, văn bản trong div sẽ được tô màu xanh. Nếu bạn chuyển đổi thứ tự của các quy tắc, nó sẽ có màu đỏ.

Answer 2

Đơn hàng thực sự quan trọng.

Xem http://msdn.microsoft.com/en-us/library/aa342531%28VS.85%29.aspx#specf

Để trích dẫn, một phần:

3. Sắp xếp theo đặc trưng của selector: selectors với selectors đặc override cao hơn mà là tổng quát hơn. Tính đặc hiệu được tính bằng cách nối số đếm (a) thuộc tính ID, (b) thuộc tính lớp và thuộc tính giả, và (c) tên loại và phần tử giả trong bộ chọn.

Ví dụ: mỗi bộ chọn sau có thể áp dụng cho một phần tử LI; tuy nhiên, chỉ những khai báo có độ đặc hiệu cao nhất mới được áp dụng trong trường hợp có xung đột.

*    {} /* a=0 b=0 c=0 -> specificity = 0 */ 
li   {} /* a=0 b=0 c=1 -> specificity = 1 */ 
ul li   {} /* a=0 b=0 c=2 -> specificity = 2 */ 
li:first-line {} /* a=0 b=0 c=2 -> specificity = 2 */ 
ul ol+li  {} /* a=0 b=0 c=3 -> specificity = 3 */ 
li.class  {} /* a=0 b=1 c=1 -> specificity = 11 */ 
li#id   {} /* a=1 b=0 c=1 -> specificity = 101 */ 

4.Sort theo lệnh quy định: nếu hai quy tắc có trọng lượng và độ đặc hiệu tương tự, người cuối cùng phân tích thắng. (Lưu ý rằng các bảng định kiểu được chỉ định với quy tắc @import được phân tích cú pháp đầu tiên.) Các bộ chọn xuất hiện sau trong biểu định kiểu sẽ được sử dụng nếu có xung đột. Vì lý do này, liên kết bộ chọn lớp giả nên luôn được sử dụng theo thứ tự sau.

Xem thêm http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/ để có mô tả rộng hơn với nhiều ví dụ hơn.

Lưu ý rằng vì không có sự chồng chéo trong ví dụ của bạn, thứ tự không quan trọng. Mặt khác, nếu bạn có các kiểu xung đột, thì trọng lượng, độ đặc hiệu và thứ tự sẽ có liên quan. Tôi cho rằng ví dụ của bạn trong câu hỏi khá đơn giản.

Answer 3

Đặt hàng chỉ có vấn đề nếu các quy tắc áp dụng cho cùng một thuộc tính của cùng một yếu tố. (Trong trường hợp đó, quy tắc cuối cùng "thắng"). Trong ví dụ của bạn, thứ tự sẽ không có sự khác biệt.