Vào ngày viết CSS trung bình của bạn, rất có thể bạn sẽ không nghĩ về quyền ưu tiên trong CSS. Nó không xuất hiện nhiều. Nhưng nó có vấn đề. Nó xuất hiện bất cứ lúc nào nhiều bộ chọn CSS khớp với một phần tử có cùng tính đặc hiệu
Giả sử tính đặc hiệu hoàn toàn giống nhau, thứ tự không thành vấn đề
Phong cách tuyên bố sau chiến thắng
Trong một biểu định kiểu duy nhất
Giả sử chúng tôi có một số HTML như thế này
Document
Module
Thứ tự của các thuộc tính trong HTML không quan trọng. Đó là thứ tự trong stylesheet. Hãy tập trung vào
/*
All of these selectors match
and they all have the same specificity
*/
.module {
background: #ccc;
padding: 20px;
max-width: 400px;
margin: 20px auto;
}
.module-foo {
background: orange;
}
/* LAST declared, so these property/values win */
.module-bar {
background: lightblue; /* I win! */
/* I still have all the _other_ styles as well */
}
0/*
All of these selectors match
and they all have the same specificity
*/
.module {
background: #ccc;
padding: 20px;
max-width: 400px;
margin: 20px auto;
}
.module-foo {
background: orange;
}
/* LAST declared, so these property/values win */
.module-bar {
background: lightblue; /* I win! */
/* I still have all the _other_ styles as well */
}
Một ví dụ phức tạp có chủ ý
Thứ tự không giới hạn ở một biểu định kiểu. Thứ tự của biểu định kiểu trong tài liệu thậm chí còn quan trọng hơn
Hãy xem tài liệu này với ba phong cách riêng biệt… uh… hãy gọi chúng là chunks. Một đoạn là một khối
/*
All of these selectors match
and they all have the same specificity
*/
.module {
background: #ccc;
padding: 20px;
max-width: 400px;
margin: 20px auto;
}
.module-foo {
background: orange;
}
/* LAST declared, so these property/values win */
.module-bar {
background: lightblue; /* I win! */
/* I still have all the _other_ styles as well */
}
0, một khối /*
All of these selectors match
and they all have the same specificity
*/
.module {
background: #ccc;
padding: 20px;
max-width: 400px;
margin: 20px auto;
}
.module-foo {
background: orange;
}
/* LAST declared, so these property/values win */
.module-bar {
background: lightblue; /* I win! */
/* I still have all the _other_ styles as well */
}
1 hoặc một biểu định kiểu /*
All of these selectors match
and they all have the same specificity
*/
.module {
background: #ccc;
padding: 20px;
max-width: 400px;
margin: 20px auto;
}
.module-foo {
background: orange;
}
/* LAST declared, so these property/values win */
.module-bar {
background: lightblue; /* I win! */
/* I still have all the _other_ styles as well */
}
2ed
Document
.module-baz {
background-color: pink;
}
Module
@import "2.css";
/*
Contains
.module-bar { background: #f06d06; }
*/
Tôi đã dán nhãn các khối #1, #2 và #3. Tất cả chúng đều chứa các bộ chọn CSS có cùng độ đặc hiệu chính xác. # 3 được tuyên bố cuối cùng, vì vậy nó sẽ thắng trận chiến ưu tiên
CSS được tải không đồng bộ vẫn tôn trọng thứ tự tài liệu
Có lẽ bạn đang tải CSS bằng một trình tải CSS tuyệt vời như loadCSS. Điều gì sẽ xảy ra nếu chúng ta tải một tệp CSS thứ tư cùng với nó với thiết lập chính xác giống như ví dụ “phức tạp” ở trên?
loadCSS đưa biểu định kiểu vào cuối
/*
All of these selectors match
and they all have the same specificity
*/
.module {
background: #ccc;
padding: 20px;
max-width: 400px;
margin: 20px auto;
}
.module-foo {
background: orange;
}
/* LAST declared, so these property/values win */
.module-bar {
background: lightblue; /* I win! */
/* I still have all the _other_ styles as well */
}
3 theo mặc định, vì vậy nó sẽ trở thành #3 và khối /*
All of these selectors match
and they all have the same specificity
*/
.module {
background: #ccc;
padding: 20px;
max-width: 400px;
margin: 20px auto;
}
.module-foo {
background: orange;
}
/* LAST declared, so these property/values win */
.module-bar {
background: lightblue; /* I win! */
/* I still have all the _other_ styles as well */
}
1 ở dưới cùng của phần thân sẽ trở thành #4 và do đó giành chiến thắngThực sự là không hợp lệ [mặc dù nó hoạt động] để có một khối
/*
All of these selectors match
and they all have the same specificity
*/
.module {
background: #ccc;
padding: 20px;
max-width: 400px;
margin: 20px auto;
}
.module-foo {
background: orange;
}
/* LAST declared, so these property/values win */
.module-bar {
background: lightblue; /* I win! */
/* I still have all the _other_ styles as well */
}
5 hoặc /*
All of these selectors match
and they all have the same specificity
*/
.module {
background: #ccc;
padding: 20px;
max-width: 400px;
margin: 20px auto;
}
.module-foo {
background: orange;
}
/* LAST declared, so these property/values win */
.module-bar {
background: lightblue; /* I win! */
/* I still have all the _other_ styles as well */
}
1 là con của /*
All of these selectors match
and they all have the same specificity
*/
.module {
background: #ccc;
padding: 20px;
max-width: 400px;
margin: 20px auto;
}
.module-foo {
background: orange;
}
/* LAST declared, so these property/values win */
.module-bar {
background: lightblue; /* I win! */
/* I still have all the _other_ styles as well */
}
7, vì vậy sẽ rất hiếm khi một biểu định kiểu được tải bởi loadCSS không phải là người chiến thắng theo mặc địnhNgoài ra, bạn có thể chỉ định ID để nhắm mục tiêu để có thể kiểm soát thứ tự CSS
/*
All of these selectors match
and they all have the same specificity
*/
.module {
background: #ccc;
padding: 20px;
max-width: 400px;
margin: 20px auto;
}
.module-foo {
background: orange;
}
/* LAST declared, so these property/values win */
.module-bar {
background: lightblue; /* I win! */
/* I still have all the _other_ styles as well */
}
2CSS quan trọng có trở nên kỳ lạ không?
Một trong những lý do khiến bạn có thể sử dụng loadCSS là vì bạn đang cố tình trì hoãn việc tải biểu định kiểu của mình, bởi vì bạn đang đưa CSS quan trọng vào
/*
All of these selectors match
and they all have the same specificity
*/
.module {
background: #ccc;
padding: 20px;
max-width: 400px;
margin: 20px auto;
}
.module-foo {
background: orange;
}
/* LAST declared, so these property/values win */
.module-bar {
background: lightblue; /* I win! */
/* I still have all the _other_ styles as well */
}
3 để thử và đưa các kiểu vào gói đầu tiên và tăng tốc độ kết xuất/*
All of these selectors match
and they all have the same specificity
*/
.module {
background: #ccc;
padding: 20px;
max-width: 400px;
margin: 20px auto;
}
.module-foo {
background: orange;
}
/* LAST declared, so these property/values win */
.module-bar {
background: lightblue; /* I win! */
/* I still have all the _other_ styles as well */
}
4Việc thực hành CSS quan trọng liên quan đến việc chuyển các bộ chọn CSS lên một đoạn cao hơn. đoạn số 1. Đoạn có thứ tự thấp nhất và dễ ghi đè nhất. Vì vậy, về mặt lý thuyết, vâng, có thể có xung đột/thay đổi về những gì CSS được áp dụng khi so sánh trang với CSS quan trọng được áp dụng và với CSS được tải đầy đủ. Tuy nhiên, biểu định kiểu tải đầy đủ và xuất hiện sau CSS quan trọng, vì vậy cuối cùng nó sẽ hoạt động như dự kiến
Bạn có thể cần tinh chỉnh chính xác những gì làm cho nó trở thành CSS quan trọng và những gì không – để tránh những thay đổi kiểu dáng chớp nhoáng kỳ lạ
Các phần mở rộng có trở nên kỳ lạ không?
Trong một bộ tiền xử lý, chúng có thể
Giả sử bạn muốn tạo kiểu cho một thứ bằng một biến thể
/*
All of these selectors match
and they all have the same specificity
*/
.module {
background: #ccc;
padding: 20px;
max-width: 400px;
margin: 20px auto;
}
.module-foo {
background: orange;
}
/* LAST declared, so these property/values win */
.module-bar {
background: lightblue; /* I win! */
/* I still have all the _other_ styles as well */
}
5Và mã tiền xử lý [siêu đơn giản cho mục đích demo] kết thúc như thế nào
/*
All of these selectors match
and they all have the same specificity
*/
.module {
background: #ccc;
padding: 20px;
max-width: 400px;
margin: 20px auto;
}
.module-foo {
background: orange;
}
/* LAST declared, so these property/values win */
.module-bar {
background: lightblue; /* I win! */
/* I still have all the _other_ styles as well */
}
6Bạn sẽ nghĩ… OK,
/*
All of these selectors match
and they all have the same specificity
*/
.module {
background: #ccc;
padding: 20px;
max-width: 400px;
margin: 20px auto;
}
.module-foo {
background: orange;
}
/* LAST declared, so these property/values win */
.module-bar {
background: lightblue; /* I win! */
/* I still have all the _other_ styles as well */
}
9 là bộ chọn được khai báo CUỐI CÙNG, vì vậy nó thắng, vì vậy nền phải có màu cam. Nhưng không phải vậy, bởi vì phần mở rộng di chuyển bộ chọn đến nơi mà thứ mà nó mở rộng được xác định, trong trường hợp của chúng tôi là trước những gì chúng tôi đang cố gắng ghi đè. CSS được biên dịch là/*
All of these selectors match
and they all have the same specificity
*/
.module {
background: #ccc;
padding: 20px;
max-width: 400px;
margin: 20px auto;
}
.module-foo {
background: orange;
}
/* LAST declared, so these property/values win */
.module-bar {
background: lightblue; /* I win! */
/* I still have all the _other_ styles as well */
}
8Vì vậy,
/*
All of these selectors match
and they all have the same specificity
*/
.module {
background: #ccc;
padding: 20px;
max-width: 400px;
margin: 20px auto;
}
.module-foo {
background: orange;
}
/* LAST declared, so these property/values win */
.module-bar {
background: lightblue; /* I win! */
/* I still have all the _other_ styles as well */
}
0 thực sự là
Document
.module-baz {
background-color: pink;
}
Module
@import "2.css";
/*
Contains
.module-bar { background: #f06d06; }
*/
1, không phải những gì chúng tôi muốn. Có lẽ dễ nhất để giải quyết vấn đề này với tính đặc hiệu hơn là thứ tự nguồnPhần mở rộng bản địa, nếu chúng trở thành một thứ, có lẽ sẽ ít gây nhầm lẫn hơn
Đó là một điều ngớ ngẩn để quản lý
Không ai muốn nghĩ về điều này. Chiến thắng theo phong cách cụ thể dễ dàng hơn nhiều. Nhưng biết về nó là một ý kiến hay, bởi vì tính đặc hiệu không cần thiết cũng là một điều vô lý