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 Một phần tử HTML có thể được tạo kiểu theo 3 cách sau
Di sảnCá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ả ) was colored Vì chúng tôi chưa chỉ định bất kỳ quy tắc nào cho Biểu định kiểuChú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ử Và chúng tôi nhận được Kiểu dáng nội tuyếnThuộc tính Đâ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? 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 StylingNhưng đợi đã. Có một sự khác biệt ưu tiên giữa các quy tắc quá độ đặc hiệuChú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
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. 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 Đợ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 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 |
