Hãy nêu độ ưu tiên trong css?
Có bao giờ các bạn code CSS cho một site nào đó của bạn bè hoặc dự án công ty. Nhưng code CSS xong rồi nó lại không nhận, mặc dù đã đúng đường dẫn, check thấy rõ ràng nhưng lại không được kết quả như mong muốn. Và bạn nhận ra rằng ah thì ra có 1 đoạn code CSS ai đã code trước đó sử dụng Ai dè mình code hoài sửa hoài mà CSS của mình nó không có chạy. Lúc này bạn mới nhận ra rằng độ ưu tiên trong CSS nó rất là quan trọng. Vì thế hôm nay chúng ta sẽ cùng tìm hiểu tất tần tật về độ ưu tiên trong CSS nó như thế nào nhé Giả sử bây giờ chúng ta có đoạn code HTML và CSS đơn giản như sau
p { font-size: 10px; } p.text { font-size: 14px; } Các bạn đoán thử xem. Kết quả ra Thứ nhất là vì nó nằm dưới nên độ ưu tiên nó cao hơn, thứ hai là nó có thêm class div p.text { font-size: 14px; } #header p { font-size: 20px; } Ấy chà chà khó hơn rồi đây. Không code chạy thử nhé vì chúng ta cần hiểu và làm chớ code ra thì dễ rồi. Chỗ này người nào đã từng làm nhiều thì sẽ biết ngay thôi tuy nhiên người mới sẽ nghĩ là chắc là Nhưng kết quả lại không nghiêng về người mới. Kết quả là người có kinh nghiệm đúng là # Câu chuyện nhỏ nhoĐể rõ ràng hơn về độ ưu tiên này trong CSS thì mình làm câu chuyện nho nhỏ như sau cho các bạn dễ hình dung. Giả sử các bạn đang xếp hàng có 4 người mua bánh. A (anh bạn) B (Bạn) C (Chú bạn) D (Dì bạn) thì bây giờ theo thứ tự ưu tiên sẽ là A B C D hen. Đầu tiên là các
elements(thẻ) trong CSS như là thẻ Tiếp theo là các class, pseudo class như Tiếp đến là các
id như Và cuối cùng là inline-style. Nghĩa là code trực tiếp bên trong thẻ HTML luôn như này và nó có độ ưu tiên cao nhất ta được (1A, 0B, 0C, 0D)
Giờ nhìn lại vào đoạn code khi nãy thì thấy đoạn code ở dưới có độ ưu tiên cao hơn cho nên nó sẽ chạy đoạn code đó div p.text { /*2 elements và 1 class ta có (0A,0B,1C,2D)*/ font-size: 14px; } #header p { /*1 id và 1 element ta có (0A,1B,0C,1D)*/ font-size: 20px; } Cho dù bạn code như thế này thì cái số 5 đó không có nghĩa lý gì khi nó vẫn đứng cuối. Còn thằng đứng cao hơn nó là đoạn code ở dưới có
div div div div p.text { /*5 elements và 1 class ta có (0A,0B,1C,5D)*/ font-size: 14px; } #header p { /*1 id và 1 element ta có (0A,1B,0C,1D)*/ font-size: 20px; } À còn 1 điểm nữa nếu như mình muốn đoạn code Cho nên khi sử dụng thêm Cho nên lúc này đoạn code trên sửa lại như này và nó sẽ chạy đoạn code div p.text { font-size: 14px !important; } #header p { font-size: 20px !important; } Thì lúc này nó ngang hàng về mặt # Lưu ýTrước khi kết thì còn vài điểm nữa là nếu trường hợp cả 2 đoạn code đều có thẻ #header div div div p { /*4 elements và 1 id ta có (0A,1B,0C,4D)*/ font-size: 14px; } #header div p { /*1 id và 2 element ta có (0A,1B,0C,2D)*/ font-size: 25px; } Trường hợp tất cả đều bằng nhau thì nó sẽ ưu tiên đoạn code ở dưới nhé. Vì độ ưu tiên trong CSS chạy từ dưới lên #header div div div p { /*4 elements và 1 id ta có (0A,1B,0C,4D)*/ font-size: 14px; } #header div div div p { /*1 id và 4 element ta có (0A,1B,0C,4D)*/ font-size: 25px; } Thế trường hợp như này các bạn nghĩ là cái nào nà. Rõ ràng là đoạn code trên ưu tiên hơn vì so sánh như sau: 0A = 0A, 1B = 1B, 1C > 0C, 4D = 4D. Làm lâu riết các bạn sẽ dễ dàng nhận ra luôn mà không cần phải tính toán nhiều. #header div div div p.text { /*4 elements 1class và 1 id ta có (0A,1B,1C,4D)*/ font-size: 14px; } #header div div div p { /*1 id và 4 element ta có (0A,1B,0C,4D)*/ font-size: 25px; } Đặc biệt là khi các bạn custom CSS cho WordPress. Code nó bao dài luôn. Đòi hỏi các bạn phải hiểu để dùng cho đúng chứ không nên lạm dụng Đây là một đoạn code dài khủng hoảng bên WordPress cho các bạn xem ví dụ để hiểu được rằng độ ưu tiên trong CSS nó quan trọng như thế nào. Bạn muốn đè đoạn code này ư ? Hãy phân tích nó từ các thẻ HTML và Class trong trang web nhé. .thrv_wrapper:not(.tve_image_caption):not(.thrv_icon):not(.thrv-button):not(.thrv-content-box) { min-width: 20px; } Một điểm lưu ý cuối cùng đó là Internal CSS và External CSS cụ thể là CSS nằm trong cặp thẻ # Lời kếtHi vọng với câu chuyện vui nhộn kèm theo giải thích chi tiết sẽ giúp bạn hiểu được rõ ràng hơn về thứ tự độ ưu tiên trong CSS. Nó rất là quan trọng nên các bạn chú ý học chứ đừng bỏ qua nhé. Nếu có gì thắc mắc góp ý hoặc cám ơn thì cứ comment mình sẽ trả lời. Chúc các bạn một ngày tốt lành nà Bài viết có tham khảo từ trang vanseodesigndotcom . |