Các đối tượng HTML có thể dùng chung CSS với nhau, do đó đôi khi các đối tượng có thể bị ảnh hưởng một thuộc tính CSS nào đó không mong muốn. Để kiểm soát vấn đề này bạn cần phải xét đến độ ưu tiên CSS để kiểm soát được việc CSS nào đang tác động đến đối tượng và điều chỉnh sự tác động thông qua độ ưu tiên. Trong bài viết này mình sẽ chia sẻ đến bạn cách xét độ ưu tiên và cách sử dụng chúng để tác động CSS đúng mục đích.
Thứ tự ưu tiên trong cách triển khai CSS
Trong bài viết đầu tiên: CSS là gì? Các cách sử dụng CSS trong website mình có giới thiệu 3 cách sử dụng CSS. Vậy nếu như một phần tử đều được CSS ở cả 3 cách trên thì sẽ áp dụng như thế nào. Xét một ví dụ sau:
HTML: <h1 class="title">Tiêu đề</h1>
- CSS linked (file .css):
.title {color:red} - CSS embed:
.title {color:yellow} - CSS inline:
style="color:blue"
Trong trường hợp này thì màu của “Tiêu đề” sẽ là gì? Câu trả lời là màu xanh da trời “blue” nhé. Và nếu ko có dòng CSS Inline thì sẽ là màu Vàng
Sự ưu tiên của CSS trong trường hợp này sẽ lần lượt là là Inline => embed => linked.
Thứ tự ưu tiên trong Selector
Ta xét ví dụ sau:
See the Pen
Uu Tien trong CSS trung nhau by Nguyen The Cuong (@nguyen-the-cuong)
on CodePen.
Nhìn ví dụ trên bạn sẽ thấy trong thẻ <div> class header có hai thẻ ptuy nhiên css .header>p chỉ tác động đến một thẻ p nằm trực tiếp dưới thẻ cha mà không thông qua một thẻ nào khác. thẻ p thứ 2 nằm trong một thẻ khác nữa nên nó sẽ không bị tác động. Tương tự như vậy bạn có thể sử dụng phương pháp này để xác định cấp độ thẻ bị tác động. Dấu ">" sẽ cho biết thẻ nằm trực tiếp trong chứ không phải là tất cả thẻ nằm trong.
Nếu bạn không sử dụng dấu ">" như css .header img thì nó sẽ tác động đến tất cả thẻ img trong thẻ <div> có class header.
Trong CSS nếu bạn sử dụng các thẻ lồng nhau thì thứ tự ưu tiên của nó sẽ là: Tag => Class => ID => !important
Thuộc tính đánh dấu quan trọng trong CSS
Khi các CSS của bạn đã được sắp xếp theo một cách trật tự, nhưng bạn vẫn muốn một thuộc tính css nào đó tác động đến đối tượng và vượt qua các css được ưu tiên hơn thì bạn cần sử dụng thêm một thuộc tính để đánh dấu rằng thuộc tính đó phải được ưu tiên sử dụng trước, mặc dù nó được sắp xếp ở mức ưu tiên thấp hơn.
Thuộc tính để đánh dấu tầm quan trọng trong css đó là: !important
Thuộc tính này được thêm trực tiếp vào thuộc tính css như sau: thuộc_tính: giá_trị !important;
Và trong trường hợp các css đều có !importantthì css có cấp độ ưu tiên cao hơn sẽ được áp dụng.
