[CSS Căn bản] Xét độ ưu tiên của các CSS trùng nhau

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 CSS

Thứ tự ưu tiên trong vị trí đặt CSS

Đầu tiên đó là sự ưu tiên về vị trí CSS. Trong bài [CSS Căn bản] CSS là gì? cách sử dụng CSS trong website mình đã có nhắc đến 3 cách triển khai CSS, đó là linked, embed và inline. Thứ tự ưu tiên cũng theo như vậy. Ví dụ bạn có một css như sau

HTML: <h1 class="title">Đây là tiêu đề</h1>

CSS linked: .title {color:red}

CSS embed: .title {color:green}

CSS inline: style="color:blue"

Trường hợp này HTML sẽ bị tác động bởi CSS inline. hai CSS còn lại bị gạch bỏ. Nếu không có CSS Inline thì CSS embed sẽ được triển khai.

Như vậy bạn có thể thấy sự ưu tiên của CSS là Inline => embed => linked.

Thứ tự ưu tiên trong việc lòng ghép các selector

Mình có một ví dụ như thế này.

HTML

<div class="header">
  <p>Tôi là Tuandc</p>
  <div class="logo">
    <img src="logo.png"/>
    <p>Share all best for you</p>
  </div>
</div>

CSS

.header>p {color:red;}
.header>.logo>p{color:yellow;}
.header>.logo{background:blue}
.header img{text-align: center;}

Kết quả hiển thị của ví dụ trên

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.

Trong bài sau mình sẽ chia sẻ với bạn về responsive sử dụng truy vấn media trong CSS.