Ưu tiên CSS nội tuyến so với CSS bên ngoài

Biểu định kiểu

Chúng ta có thể viết các quy tắc CSS trong một tệp bên ngoài và liên kết với nó bằng phần tử hoặc nhúng các quy tắc đó vào phần của trang bằng cách sử dụng phần tử , trong cả hai trường hợp, chúng ta nên nhắm mục tiêu các quy tắc CSS tới các phần tử HTML

Và chúng tôi nhận được

Kiểu dáng nội tuyến

Thuộc tính style cho phép chúng ta tạo kiểu cho một phần tử trong thẻ mở

Đây là những gì chúng tôi nhận được

Với tất cả những cách này để tạo kiểu cho một phần tử, sẽ có sự khác biệt, phải không?

Không phải tất cả các cách tạo kiểu cho một phần tử đều có tầm quan trọng như nhau, trình duyệt sẽ ưu tiên chúng như sau

Inline Styling > Style Sheets > Kế thừa

Kế thừa có mức độ ưu tiên thấp nhất vì phần tử con bị 'chịu ảnh hưởng' bởi phần tử gốc của nó, chúng tôi chưa nhắm mục tiêu bất kỳ quy tắc nào cho phần tử đó

Các quy tắc nhắm mục tiêu của Biểu định kiểu trực tiếp đến các phần tử để nó phù hợp hơn

Inline Styling nằm trong định nghĩa của phần tử, đó là lý do tại sao nó có mức độ quan trọng cao nhất

Đây là một cuộc biểu tình

Nhưng đợi đã. Có một sự khác biệt ưu tiên giữa các quy tắc quá

độ đặc hiệu

Chúng tôi biết rằng không phải tất cả các cách tạo kiểu cho một phần tử đều có tầm quan trọng như nhau, nhưng nếu chúng tôi chỉ tạo kiểu theo một cách thì sao?

nhìn vào các quy tắc này trong

Kết quả sẽ như thế nào?

Vấn đề là, bộ chọn càng cụ thể thì quy tắc đó càng quan trọng.

Thuộc tính id cụ thể hơn thuộc tính !important0 và phần tử

id [một phần tử cụ thể] > !important0 [một nhóm phần tử] >

[tất cả các đoạn văn]

Nhưng đợi đã. Nếu 2 quy tắc có cùng bộ chọn thì sao?

Cái thứ hai được áp dụng

Đây được gọi là quy tắc Thứ tự. Nếu hai hoặc nhiều quy tắc có cùng bộ chọn thì kiểu quan trọng nhất nằm ở quy tắc cuối cùng

Bây giờ bạn biết về ưu tiên, phải không?

Tất cả các ví dụ trên có cùng kiểu thuộc tính. !important5. Tại sao chúng ta chỉ muốn tạo kiểu !important5 lặp đi lặp lại?

Hãy phân tích các quy tắc này trước khi chuyển sang bài viết này. Bạn nghĩ kết quả sẽ là gì?

Khi thảo luận về mức độ ưu tiên, hầu hết các ví dụ trên internet đều khá giống với những ví dụ đầu tiên, nhiều quy tắc tạo kiểu cho các thuộc tính giống nhau. Nhưng với các ví dụ như trong đoạn mã cuối cùng, chúng ta có thể thấy mức độ ưu tiên thực sự là gì

Đây là những gì chúng tôi nhận được

Đợi đã. Chẳng phải quy tắc càng cụ thể thì mức độ quan trọng càng cao sao?

Vâng… tốt loại. Quan niệm sai lầm phổ biến nhất ở đây là nghĩ rằng trình duyệt sẽ hoàn toàn bỏ qua quy tắc ít cụ thể hơn [hoặc quy tắc đầu tiên nếu chúng có cùng bộ chọn] nhưng điều đó sẽ không xảy ra.

Khi hai hoặc nhiều quy tắc nhắm vào cùng một phần tử và tạo kiểu cho các thuộc tính giống nhau thì sẽ xảy ra xung đột. Đó là khi trình duyệt ưu tiên/chọn quy tắc cụ thể hơn [hoặc quy tắc cuối cùng nếu chúng có cùng bộ chọn] để tạo kiểu cho thuộc tính đó, hay nói cách khác là nó giải quyết xung đột

Nếu không có thêm xung đột, phần còn lại của các kiểu trong tất cả các quy tắc trỏ đến cùng một phần tử sẽ được áp dụng mà không có vấn đề gì, ngay cả khi chúng ta sử dụng các phương pháp tạo kiểu khác nhau

Kiểm tra cái này

Ta-da

Cuối cùng, chúng ta đã hiểu rõ hơn về cách thức hoạt động của mức độ ưu tiên trong CSS, hãy nhớ rằng trình duyệt sẽ ưu tiên kiểu này hơn kiểu khác NẾU có xung đột, nếu không thì tất cả các kiểu sẽ được áp dụng như bình thường

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 nội tuyến có đượ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?

CSS nội tuyến có nhanh hơn CSS bên ngoài không?