Một phần để hiểu cách CSS 'xếp tầng' là hiểu các mức độ ưu tiên và cách chúng thực sự hoạt động. Vì vậy, hãy bắt đầu
Ghi chú. Để đơn giản hóa mọi thứ, chúng tôi sẽ không nói về từ khóa !important
vì đây được coi là một phương pháp hay để hạn chế việc sử dụng từ khóa. Sau khi đọc bài viết này, bạn có thể muốn đọc ở đây khi có thể nên sử dụng !important
Một phần tử HTML có thể được tạo kiểu theo 3 cách sau
- Di sản
- Biểu định kiểu [được nhúng hoặc bên ngoài]
- kiểu dáng nội tuyến
Di sản
Các phần tử con kế thừa một số kiểu từ phần tử cha của chúng. Không phải tất cả các phong cách đều có thể được kế thừa một cách tự nhiên [e. g đường viền, phần đệm, lề, v.v.]. Tại đây bạn có thể đọc thêm về Kế thừa và tìm danh sách các thuộc tính có thể kế thừa
Chúng tôi có mã này
We are styling the parent [Đây là kết quả
The child [
] was colored
Vì chúng tôi chưa chỉ định bất kỳ quy tắc nào cho , nên nó sẽ bị 'chịu ảnh hưởng' bở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
Một đoạn màu đỏ thẫm mát mẻ
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
Ngạc nhiên?
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?
Sự ưu tiênKhô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
Embedded Style Sheets vs Inline StylingInline Styling có mức độ ưu tiên cao hơn
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 thành phần đề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?
màu tím thắng
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 !important
0 và phần tử
id
[một phần tử cụ thể] > !important
0 [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
Đoạn văn được tô màu xám
Đâ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. !important
5. Tại sao chúng ta chỉ muốn tạo kiểu !important
5 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ì?
Đó là tất cả về xung độtKhi 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
Cả hai quy tắc được áp dụng… loại
Đợ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
Tính đặc hiệu khác nhau và phương pháp tạo kiểu khác nhauTa-da
kết luận
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