Tại sao CSS nội tuyến có mức độ ưu tiên cao nhất so với CSS bên ngoài?

CSS gây khó chịu cho nhiều người. Tôi nghĩ ngoài việc tổ chức kém, rất nhiều sự thất vọng liên quan đến việc không biết làm thế nào các phong cách ghi đè lên các phong cách khác. Nó dẫn đến sự nhầm lẫn, CSS lộn xộn và không có tổ chức, cũng như rất nhiều thủ thuật và bộ chọn CSS phức tạp. Tính đặc hiệu của CSS giúp chúng tôi xác định cách các kiểu tương tác với các kiểu xung đột khác

thứ tự xếp tầng

Tính đặc hiệu của CSS cho phép chúng tôi xác định bộ chọn kiểu nào trong CSS của chúng tôi được ưu tiên. Tuy nhiên, điều đầu tiên chúng ta cần tính đến là Thứ tự Cascading. Nghe có vẻ phức tạp hơn thực tế, nhưng về cơ bản, Cascading Order liên quan đến cách các kiểu được ghi đè tùy thuộc vào vị trí của chúng. Để ghi đè lên một kiểu đã được khai báo trước đó, chúng ta chỉ cần khai báo nó ở phía dưới trong tài liệu. Nhưng nếu chúng ta có nhiều tài liệu hoặc kiểu được đặt trong tài liệu bên ngoài và kiểu trong tiêu đề của tệp HTML thì sao? . Thứ tự như sau

• Kiểu mặc định của trình duyệt
• Tệp CSS bên ngoài (Được liên kết hoặc @import-ed)
• Internal CSS (in the )
• Kiểu nội tuyến (kiểu được áp dụng trực tiếp cho các phần tử)

Nó hoạt động theo kiểu phản trực giác, vì vậy chỉ cần giải thích thêm. các kiểu nội tuyến ghi đè CSS nội bộ và CSS nội bộ ghi đè các tệp CSS bên ngoài và các tệp CSS bên ngoài ghi đè mặc định của trình duyệt. Một cách để nghĩ về nó giống như các lớp. Phong cách càng “gần” với phần tử thì nó càng có mức độ ưu tiên cao hơn. Kiểu nội tuyến có mức độ ưu tiên cao nhất vì nó được viết theo nghĩa đen trên phần tử. Mặt khác, các kiểu mặc định của trình duyệt (nghĩ là Times New Roman, 16pt) dễ bị ghi đè vì chúng ở “xa” nhất so với phần tử

Ví dụ: giả sử chúng ta có một tài liệu HTML với một thẻ đoạn văn, với lớp “giới thiệu” được áp dụng, như vậy

nhà. html ______0

Trong tệp CSS của chúng tôi,

.intro {
  font-family: ‘Helvetica Neue’;
  color: green;
}

8, chúng tôi có định nghĩa kiểu sau

nội dung. css

.intro {
  font-family: ‘Helvetica Neue’;
  color: green;
}

Khi đoạn văn được hiển thị trong trình duyệt, nó trông như thế này

Bây giờ, giả sử chúng ta quyết định thêm đoạn CSS sau vào thẻ

.intro {
  font-family: ‘Helvetica Neue’;
  color: green;
}

9 của tài liệu HTML

nội dung. css

.intro {
  color: navy;
}

Bây giờ nếu chúng ta tải lại trình duyệt, đoạn văn sẽ như thế này

Bây giờ, như một phần bổ sung cuối cùng, hãy thêm một kiểu nội tuyến vào đoạn văn

nhà. html ______5

Nếu chúng tôi tải lại trình duyệt lần cuối, đoạn văn sẽ như thế này

Mặc dù không phải là ví dụ thú vị nhất, nhưng bạn có thể thấy cách CSS bên ngoài bị CSS nhúng ghi đè và CSS nhúng bị kiểu nội tuyến ghi đè. Điều này tuân theo Thứ tự xếp tầng và nó giúp ghi nhớ khi nghĩ về Tính đặc hiệu

độ đặc hiệu

Với Thứ tự xếp tầng, chúng tôi có thể biết cách các kiểu được ghi đè dựa trên vị trí của chúng, liên quan đến phần tử. Nhưng điều gì sẽ xảy ra nếu chúng ta có nhiều bộ chọn kiểu nhắm mục tiêu cùng một phần tử?

Hãy quay lại ví dụ về đoạn văn của chúng ta, nhưng lần này hãy loại bỏ kiểu nội tuyến (vì kiểu nội tuyến thường không phải là một ý tưởng hay). Trong khi chúng ta đang ở đó, hãy tiếp tục và xóa tất cả các khai báo CSS khỏi

.intro {
  font-family: ‘Helvetica Neue’;
  color: green;
}

9 cũng như

.intro {
  font-family: ‘Helvetica Neue’;
  color: green;
}

8. Vì lợi ích của ví dụ này, tôi cũng sẽ đưa vào một đoạn khác

________số 8

Hãy thêm một phong cách vào

.intro {
  font-family: ‘Helvetica Neue’;
  color: green;
}

8 hiện đang trống

nội dung. css

.intro {
  font-family: ‘Helvetica Neue’;
  color: green;
}

0

Điều này sẽ tạo kiểu cho tất cả các thẻ p bằng phông chữ Helvetica Neue. Đối với các thẻ đoạn văn có lớp giới thiệu được áp dụng, hãy làm cho văn bản lớn hơn một chút

nội dung. css

.intro {
  font-family: ‘Helvetica Neue’;
  color: green;
}

1

Vì vậy, bây giờ, tất cả các đoạn văn trong tài liệu của chúng tôi sẽ được hiển thị bằng phông chữ Helvetica Neue và bất kỳ đoạn giới thiệu nào sẽ được hiển thị với kiểu chữ lớn hơn một chút

Bây giờ, giả sử ai đó đã xem CSS của chúng ta và muốn tạo bộ chọn đầu tiên cụ thể hơn một chút cho trang

nội dung. css

.intro {
  font-family: ‘Helvetica Neue’;
  color: green;
}

2

Bây giờ nếu chúng tôi làm mới trang, chúng tôi sẽ thấy điều này

Bạn thấy những gì đã xảy ra ở đây? . Nó bất chấp Thứ tự xếp tầng (chúng tôi mong đợi thứ hai sẽ ghi đè lên thứ nhất), điều này có thể khiến nó hơi khó hiểu. Đây là nơi biết cách hoạt động của Tính đặc hiệu có ích

Tính toán độ đặc hiệu của CSS

Độ đặc hiệu CSS của bộ chọn có thể được tính toán bằng cách xem xét những gì tạo nên bộ chọn và đếm các thành phần khác nhau. Đây là một biểu đồ tiện dụng

Độ đặc hiệu được viết là

.intro {
  color: navy;
}

3. Tại sao ký hiệu được phân tách bằng dấu phẩy? . Gây nhầm lẫn? . hãy xem lại ví dụ của chúng ta

.intro {
  font-family: ‘Helvetica Neue’;
  color: green;
}

8

nội dung. css

.intro {
  font-family: ‘Helvetica Neue’;
  color: green;
}

2

Hãy phá vỡ điều đó một chút

Sử dụng công thức Tính đặc hiệu, chúng ta có thể thấy rằng bộ chọn đầu tiên là (0, 1, 1) và bộ chọn thứ hai là (0, 1, 0). Chúng ta có thể thấy bộ chọn đầu tiên rõ ràng có bộ chọn cao hơn bộ chọn thứ hai, đó là lý do tại sao bộ chọn được ưu tiên

Ok, vậy làm thế nào chúng ta có thể đặt bộ chọn giới thiệu ghi đè bộ chọn

.intro {
  color: navy;
}

5?

nội dung. css

.intro {
  font-family: ‘Helvetica Neue’;
  color: green;
}

8

Bây giờ khi chúng ta xem xét các giá trị độ đặc hiệu, chúng ta sẽ thấy CẢ HAI đều có (0, 1, 1). Thế cái gì đang xảy ra vậy? . Tất cả đang đến với nhau

Hãy xem một ví dụ khác

trích dẫn. html ______10

kiểu. css

.intro {
  font-family: ‘Helvetica Neue’;
  color: green;
}

1

Bây giờ hãy xem nó trông như thế nào khi chúng tôi tải nó lên trong trình duyệt của mình

Như bạn có thể thấy, văn bản không in nghiêng, mặc dù chúng tôi đã khá cụ thể với bộ chọn thứ hai của mình. hãy tính toán Độ đặc hiệu để tìm hiểu điều gì đang xảy ra

#top p

Một bộ chọn id (#top) và một bộ chọn phần tử (p). Điều đó mang lại cho chúng tôi. (1, 0, 1)

thùng chứa p. Trích dẫn

Hai bộ chọn lớp và một bộ chọn phần tử. Điều đó mang lại cho chúng tôi. (0, 2, 1)

Vì vậy, như bạn có thể thấy, id trên bộ chọn đầu tiên sẽ ghi đè lên bộ chọn thứ hai. Đó là bởi vì, như chúng tôi đã thiết lập, id LUÔN ghi đè lên các lớp. Nếu có một điểm nhỏ mà tôi muốn bạn rút ra từ bài đăng này, thì đó là việc sử dụng bộ chọn id trong CSS của bạn thường dẫn đến các vấn đề phức tạp. Thay vào đó, nếu bạn gắn bó với các lớp học, mọi thứ sẽ suôn sẻ hơn rất nhiều

quan trọng và tại sao bạn không nên sử dụng nó

---

Bây giờ chúng ta đã hiểu cách hoạt động của Tính đặc hiệu CSS và Thứ tự xếp tầng, hãy bắt đầu tìm hiểu tình huống với. quy tắc quan trọng. Bạn có thể thêm

.intro {
  color: navy;
}

9 vào cuối bất kỳ quy tắc CSS nào để ưu tiên đặc biệt cho quy tắc đó. Bất kỳ quy tắc nào có thêm

.intro {
  color: navy;
}

9 sẽ ghi đè tất cả các quy tắc xung đột khác. Hãy cùng xem

trích dẫn. html ______12

kiểu. css

.intro {
  font-family: ‘Helvetica Neue’;
  color: green;
}

3

trích dẫn. css

.intro {
  font-family: ‘Helvetica Neue’;
  color: green;
}

4

Lưu ý trong ví dụ này rằng tôi đã bao gồm các kiểu. css và dấu ngoặc kép. css trong

.intro {
  font-family: ‘Helvetica Neue’;
  color: green;
}

9 dấu ngoặc kép. html. Khi được hiển thị trong trình duyệt, điều này trông giống như sau

Như bạn có thể thấy, màu của văn bản là màu xanh lục. Bộ chọn

  Whoever is careless with the truth in small matters cannot be trusted with important matters.

2 trong

  Whoever is careless with the truth in small matters cannot be trusted with important matters.

3 cố gắng chọn tất cả các thẻ p và đặt chúng thành màu cam (0, 0, 1), nhưng id của bộ chọn

  Whoever is careless with the truth in small matters cannot be trusted with important matters.

4 (1, 0, 1) được ưu tiên. Những gì chúng tôi có thể làm về mặt kỹ thuật là thêm

.intro {
  color: navy;
}

9 vào bộ chọn

  Whoever is careless with the truth in small matters cannot be trusted with important matters.

6. hãy xem điều gì sẽ xảy ra

trích dẫn. css

.intro {
  font-family: ‘Helvetica Neue’;
  color: green;
}

5

Bây giờ khi chúng tôi tải nó trong trình duyệt, chúng tôi thấy

Bỏ qua tính đặc hiệu và Cascade Order, văn bản hiện có màu cam. Như bạn có thể thấy,

.intro {
  color: navy;
}

9 ghi đè tất cả các kiểu khác và “phá vỡ” thứ tự xếp tầng. Nếu chúng ta quay lại hình dung của mình, bạn có thể hình dung nó như thế này

Nó bỏ qua tất cả các kiểu khác và ảnh hưởng trực tiếp đến phần tử mục tiêu của nó. Nó không tuân theo quy ước thông thường, dẫn đến CSS khó hiểu và khó chịu.

.intro {
  color: navy;
}

9 thậm chí còn phức tạp hơn khi ngày càng có nhiều ________ 49 được ném lên trên các ________ 49 trước đó. Khi đó, Công cụ dành cho nhà phát triển của Chrome sẽ khó hiển thị cho bạn biết chuyện gì đang xảy ra. Và sau đó, bạn phải bắt đầu tìm hiểu các tệp nguồn để cố gắng hiểu ý nghĩa của nó, trong thời gian đó bạn đã mất trí và ném máy tính ra ngoài cửa sổ

Dù sao, trở lại ví dụ của chúng tôi. hãy tưởng tượng chúng ta là nhà phát triển mới của dự án và quyết định thay đổi màu của thẻ p thành màu lục lam. hãy thêm phong cách vào

.intro {
  font-family: ‘Helvetica Neue’;
  color: green;
}

9 của

  
Whoever is careless with the truth in small matters cannot be trusted with important matters.

  
Excerpt from Albert Einstein's last statement, April, 1955, translated here into English from German.

2

trích dẫn. html ______16

Từ những gì chúng ta đã học trước đó về Cascade Order, văn bản bây giờ sẽ có màu lục lam, phải không?

Vẫn màu cam. Có lẽ nếu chúng ta hiểu cụ thể hơn về bộ chọn p màu lục lam của mình?

trích dẫn. css

.intro {
  font-family: ‘Helvetica Neue’;
  color: green;
}

7

Không. Hãy nhìn vào tính toán cụ thể

Mặc dù bộ chọn màu lục lam hiện có độ đặc hiệu là (1, 3, 2), bộ chọn màu cam (0, 0, 1) với. quan trọng được ưu tiên. Hãy tưởng tượng bạn là một nhà phát triển bị ném vào dự án này và bạn đang cố gắng tìm ra lý do tại sao văn bản có màu lục lam. Chắc chắn, đây sẽ là một dự án đơn giản vì chỉ có một vài tài liệu để sắp xếp, nhưng đối với một dự án lớn hơn, việc tìm hiểu lý do tại sao có thể rất khó khăn.

Phần kết luận

Để kết thúc, tôi không nghĩ bạn nhất thiết phải tính toán độ đặc hiệu của tất cả các bộ chọn của mình. Nhưng nó giúp ghi nhớ điều đó khi bạn viết CSS của mình. Cá nhân tôi cố gắng tránh sử dụng bộ chọn id khi tôi có thể. Thực tế là chúng có thể ghi đè bất kỳ bộ chọn lớp nào có thể khiến CSS của bạn khó tìm ra khá nhanh. Và một khi điều đó bắt đầu, vấn đề chỉ còn là thời gian trước khi bạn hoặc người khác có thể sử dụng

.intro {
  color: navy;
}

9 chỉ để làm việc gì đó. Mà, bạn biết đấy, là một viễn cảnh khá kinh khủng. Để tóm tắt

CSS nội tuyến có ưu tiên cao nhất không?

Cái nào có CSS ​​nội tuyến hoặc CSS bên ngoài ưu tiên cao nhất?

Bộ chọn CSS nào có mức độ ưu tiên cao nhất?

Phong cách nào có ưu tiên cao nhất?