Ưu tiên css

Tôi đang xây dựng kênh Youtube riêng để chia sẻ nhiều hơn nữa. Nếu bạn đang muốn tôi chia sẻ nhiều hơn, hãy ĐĂNG KÝ kênh của tôi và cho tôi biết bạn đang cần chia sẻ những gì. Mình sẽ cố gắng làm những video hướng dẫn hay nhất để chia sẻ đến các bạn. Hãy cho tôi 1 đăng ký ngay bên dưới nhé. Chân thành cảm ơn

Nội dung chính Show

# Độ ưu tiên trong css
# Câu chuyện nhỏ
# Lời kết

Có bao giờ các bạn viết mã CSS cho một trang web 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, kiểm tra rõ ràng nhưng lại không đạt 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

p { font-size: 10px; }
p.text { font-size: 14px; }

p { font-size: 10px; }
p.text { font-size: 14px; }

3 hoặc

p { font-size: 10px; }
p.text { font-size: 14px; }

Ai dè mình code hoài hoài mà CSS của mình nó không chạy. Lúc này bạn mới nhận ra rằng mức độ ưu tiên trong CSS nó rất 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ề mức độ ưu tiên trong CSS nó như thế nào nhé

# Độ ưu tiên trong css

Giả sử bây giờ chúng ta có đoạn mã HTML và CSS đơn giản như sau

<div id="header">
  <p class="text">Welcome everyone!!!</p>
</div>

p { font-size: 10px; }
p.text { font-size: 14px; }

Các bạn thử xem. Kết quả là

p { font-size: 10px; }
p.text { font-size: 14px; }

5 hay là

p { font-size: 10px; }
p.text { font-size: 14px; }

6 ? .

Thứ nhất là vì nó nằm dưới nên mức độ ưu tiên của nó cao hơn, thứ hai là nó có thêm lớp

p { font-size: 10px; }
p.text { font-size: 14px; }

8 kèm theo nữa. Chà dễ quá, nếu như vậy thì cần gì phải học nhỉ?. Don't fun. Tiếp tục xem ví dụ dưới đây là

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 lại 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 chắn là

p { font-size: 10px; }
p.text { font-size: 14px; }

9 rồi vì nó có 3 cái luôn như là thẻ

div p.text {
  font-size: 14px;
}
#header p {
  font-size: 20px;
}

0 bọc ngoài rồi đến thẻ

div p.text {
  font-size: 14px;
}
#header p {
  font-size: 20px;
}

1 kèm theo lớp

p { font-size: 10px; }
p.text { font-size: 14px; }

8 chắc chắn là ưu tiên hơn .

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à

div p.text {
  font-size: 14px;
}
#header p {
  font-size: 20px;
}

3. in sao ? . Vì sao lại thế thì bạn nên hỏi người tạo ra CSS nha kaka

# Câu chuyện nhỏ

Để rõ ràng hơn về mức độ ưu tiên này trong CSS thì mình làm câu chuyện nhỏ như sau để 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 phần tử (thẻ) trong CSS như thẻ

div p.text {
  font-size: 14px;
}
#header p {
  font-size: 20px;
}

div p.text {
  font-size: 14px;
}
#header p {
  font-size: 20px;
}

div p.text {
  font-size: 14px;
}
#header p {
  font-size: 20px;
}

7 ,

div p.text {
  font-size: 14px;
}
#header p {
  font-size: 20px;
}

8 … thì độ ưu tiên trong CSS của nó nằm ở cuối ta có (0A, 0B, 0C, 1D)

Tiếp theo là các lớp, lớp giả như

div p.text {
  font-size: 14px;
}
#header p {
  font-size: 20px;
}

9 ,

p { font-size: 10px; }
p.text { font-size: 14px; }

10 ,

p { font-size: 10px; }
p.text { font-size: 14px; }

11 ,

p { font-size: 10px; }
p.text { font-size: 14px; }

12 ,

p { font-size: 10px; }
p.text { font-size: 14px; }

13 hoặc các thuộc tính(thuộc tính) như

p { font-size: 10px; }
p.text { font-size: 14px; }

14,

p { font-size: 10px; }
p.text { font-size: 14px; }

15,

p { font-size: 10px; }
p.text { font-size: 14px; }

16… thì ưu tiên của nó nằm ở vị trí cuối cùng của nó (0A, 0B, 1C,

Tiếp đến là các id như

p { font-size: 10px; }
p.text { font-size: 14px; }

17,

p { font-size: 10px; }
p.text { font-size: 14px; }

18 nó có độ ưu tiên thứ nhất của ta được (0A, 1B, 0C, 0D)

Và cuối cùng là inline-style. Nghĩa là mã trực tiếp bên trong thẻ HTML luôn như thế này và nó có mức độ ưu tiên cao nhất ta được (1A, 0B, 0C, 0D)

p { font-size: 10px; }
p.text { font-size: 14px; }

1
Giờ nhìn lại vào đoạn mã khi giả thì thấy đoạn mã ở dưới mức ưu tiên cao hơn cho nên nó sẽ chạy đoạn mã đó

p { font-size: 10px; }
p.text { font-size: 14px; }

19 đó. Vì sao vì lúc này thì 1B(bạn) đứng trước ưu tiên nhất và mã đoạn trên có 0B nên có mức ưu tiên thấp hơn và bạn đừng quan tâm đến con số 2D hay 1D vì nó đã ở cuối mức ưu tiên thấp nhất ko .
______32
Cho dù bạn code như thế này thì số 5 đó không có lý do gì khi nó vẫn đứng cuối. Còn anh đứng cao hơn nó là đoạn mã ở dưới có

p { font-size: 10px; }
p.text { font-size: 14px; }

2 mà vẫn ưu tiên hơn. Giống như lúc xếp hàng, bạn đã đứng đầu thì cho dù thằng đứng cuối cao hơn bạn 5m thì nó vẫn đứng đối xứng và độ ưu tiên vẫn thua bạn mà thôi.

<div id="header">
  <p class="text">Welcome everyone!!!</p>
</div>

<div id="header">
  <p class="text">Welcome everyone!!!</p>
</div>

5
À còn 1 điểm nữa nếu như mình muốn đoạn mã

<div id="header">
  <p class="text">Welcome everyone!!!</p>
</div>

21 vượt qua đoạn mã ở bên dưới mà không muốn . Tức là bạn muốn mua trước đó. Tất nhiên là có cách và đó chính là

p { font-size: 10px; }
p.text { font-size: 14px; }

4. Kiểu như Dì bạn có ngôi sao hi vọng hay quyền ưu tiên vì lớn tuổi nên dì bạn sử dụng chúng để mua hàng trước bạn.

Cho nên khi sử dụng thêm

p { font-size: 10px; }
p.text { font-size: 14px; }

4(quan trọng) lúc này nó sẽ có mức ưu tiên cao nhất luôn cao hơn cả cái inline style

Cho nên lúc đoạn mã này được sửa lại như thế này và nó sẽ chạy đoạn mã

<div id="header">
  <p class="text">Welcome everyone!!!</p>
</div>

21 và dì bạn sẽ mua được bánh trước bạn. Nhưng bạn đứng trước mà bạn muốn mua trước nên vì thế bạn cũng có thể sử dụng

p { font-size: 10px; }
p.text { font-size: 14px; }

p { font-size: 10px; }
p.text { font-size: 14px; }

1
Thì lúc này nó ngang hàng về mặt

p { font-size: 10px; }
p.text { font-size: 14px; }

4 coi như ta bỏ nó ra rồi so sánh như ở trên ban đầu thôi. Và tất nhiên là đoạn mã ở bên dưới có thêm

p { font-size: 10px; }
p.text { font-size: 14px; }

19 (là bạn đó) sẽ vượt qua đoạn ở trên rồi. Haha mua được bánh rồi nhóe.

# Lưu ý

Trước khi kết thúc thì còn vài điểm nữa là nếu trường hợp cả 2 đoạn mã đều có thẻ

p { font-size: 10px; }
p.text { font-size: 14px; }

2 ưu tiên như nhau thì lúc này nó sẽ xem xét số lượng các thẻ còn lại như sau. Đoạn mã này nó sẽ ưu tiên đoạn đầu tiên ở trên nha. Lúc này độ ưu tiên về

p { font-size: 10px; }
p.text { font-size: 14px; }

2 như nhau nên nó sẽ xem xét số lượng thẻ còn lại (4D > 2D) nên nó ưu tiên hơn nà

p { font-size: 10px; }
p.text { font-size: 14px; }

6
Trường hợp tất cả đều bằng nhau thì nó sẽ ưu tiên đoạn mã ở bên dưới nhé. Vì mức độ ưu tiên trong CSS chạy từ dưới lên

p { font-size: 10px; }
p.text { font-size: 14px; }

7
Trường hợp như thế này các bạn nghĩ là cái nào nà. Rõ ràng rõ ràng là mã đoạn được ưu tiên hơn vì so sánh như sau. 0A = 0A, 1B = 1B, 1C > 0C, 4D = 4D. Làm rất lâu 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.

p { font-size: 10px; }
p.text { font-size: 14px; }

0
Đặc biệt là khi bạn tùy chỉnh CSS cho WordPress. Mã 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 sử dụng

p { font-size: 10px; }
p.text { font-size: 14px; }

4 nhé. Nó chỉ được sử dụng trong trường hợp bắt buộc, không thể tìm thấy mức độ ưu tiên nào khác cao hơn cái gốc nữa mới sử dụng nha.

Đây là đoạn mã chống khủng hoảng bên WordPress cho các bạn xem ví dụ để hiểu rằng độ ưu tiên trong CSS nó quan trọng như thế nào. Bạn muốn bỏ qua đoạn mã này ư?

p { font-size: 10px; }
p.text { font-size: 14px; }

1
Một điểm lưu ý cuối cùng đó là CSS nội bộ và CSS bên ngoài cụ thể có thể là CSS nằm trong cặp thẻ bên trong HTML so với < . css”> đường dẫn đến tệp CSS trong bất kỳ thư mục nào nếu thẻ nào nằm sau thì thẻ đó có mức độ ưu tiên cao hơn nhé. bên trong HTML so với < . css”> đường dẫn đến tệp CSS trong bất kỳ thư mục nào nếu thẻ nào nằm sau thì thẻ đó có mức độ ưu tiên cao hơn nhé. bên trong HTML so với < . css”> đường dẫn đến tệp CSS trong bất kỳ thư mục nào nếu thẻ nào nằm sau thì thẻ đó có mức độ ưu tiên cao hơn nhé. bên trong HTML so với < . css”> đường dẫn đến tệp CSS trong bất kỳ thư mục nào nếu thẻ nào nằm sau thì thẻ đó có mức độ ưu tiên cao hơn nhé. bên trong HTML so với < . css”> đường dẫn đến tệp CSS trong bất kỳ thư mục nào nếu thẻ nào nằm sau thì thẻ đó có mức độ ưu tiên cao hơn nhé. bên trong HTML so với < . css”> đường dẫn đến tệp CSS trong bất kỳ thư mục nào nếu thẻ nào nằm sau thì thẻ đó có mức độ ưu tiên cao hơn nhé. bên trong HTML so với < . css”> đường dẫn đến tệp CSS trong bất kỳ thư mục nào nếu thẻ nào nằm sau thì thẻ đó có mức độ ưu tiên cao hơn nhé. bên trong HTML so với < . css”> đường dẫn đến tệp CSS trong bất kỳ thư mục nào nếu thẻ nào nằm sau thì thẻ đó có mức độ ưu tiên cao hơn nhé. bên trong HTML so với < . css”> đường dẫn đến tệp CSS trong bất kỳ thư mục nào nếu thẻ nào nằm sau thì thẻ đó có mức độ ưu tiên cao hơn nhé.

# Lời kết

Hi 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 rõ hơn về thứ tự ưu tiên trong CSS. Nó rất 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 ý hay 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