Css bên trong hay bên ngoài được ưu tiên?

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

  
  
  


  

    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

  
  

  
  

  
  



  

    Module
  

  
  

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ắng

________số 8

Thự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 định

Ngoà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 */
}

2

CSS 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 */
}

4

Việ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 */
}

5

Và 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 */
}

6

Bạ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 */
}

8

Vì 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à

  
  

  
  

  
  



  

    Module
  

  
  

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ồn

Phầ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ý

Kiểu CSS nào có mức độ ưu tiên cao nhất?

CSS nội bộ hay CSS bên ngoài nào nhanh hơn?

CSS nội tuyến hay CSS nội bộ nào được ưu tiên hơn?

Có ghi đè CSS bên ngoài hoặc nội bộ không?