Khi sử dụng bộ chọn và thẻ span trong các loại CSS, điều gì có mức độ ưu tiên cao nhất

Hầu như tất cả các xung đột kiểu CSS và ghi đè kiểu đều phải thực hiện với mức độ ưu tiên của bộ chọn css. Trong bài viết này, tôi sẽ nói về cách hoạt động của mức độ ưu tiên của bộ chọn css

Bộ chọn CSS có hệ thống phân cấp nghiêm ngặt. Tôi đã chia chúng thành 6 cấp độ (từ 0 đến 5)

cấp 0

• Bộ chọn phổ quát

  div + div { padding: 8px; }
  div > p { text-decoration: underline; }
  p ~ p { margin-bottom: 8px; }
  header h1 { font-size: 18px; }
  

  1

* { color: #000 }

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

• Bộ kết hợp CSS, chẳng hạn như bộ chọn anh chị em liền kề

  div + div { padding: 8px; }
  div > p { text-decoration: underline; }
  p ~ p { margin-bottom: 8px; }
  header h1 { font-size: 18px; }
  

  2, bộ chọn con

  div + div { padding: 8px; }
  div > p { text-decoration: underline; }
  p ~ p { margin-bottom: 8px; }
  header h1 { font-size: 18px; }
  

  3, bộ chọn anh chị em chung

  div + div { padding: 8px; }
  div > p { text-decoration: underline; }
  p ~ p { margin-bottom: 8px; }
  header h1 { font-size: 18px; }
  

  4, bộ chọn hậu duệ

  div + div { padding: 8px; }
  div > p { text-decoration: underline; }
  p ~ p { margin-bottom: 8px; }
  header h1 { font-size: 18px; }
  

  5

div + div { padding: 8px; }
div > p { text-decoration: underline; }
p ~ p { margin-bottom: 8px; }
header h1 { font-size: 18px; }

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

• Lớp giả logic, chẳng hạn như 

  div + div { padding: 8px; }
  div > p { text-decoration: underline; }
  p ~ p { margin-bottom: 8px; }
  header h1 { font-size: 18px; }
  

  6, 

  div + div { padding: 8px; }
  div > p { text-decoration: underline; }
  p ~ p { margin-bottom: 8px; }
  header h1 { font-size: 18px; }
  

  7, 

  div + div { padding: 8px; }
  div > p { text-decoration: underline; }
  p ~ p { margin-bottom: 8px; }
  header h1 { font-size: 18px; }
  

  8 , các lớp giả logic này sẽ không ảnh hưởng đến mức độ ưu tiên, điều sẽ ảnh hưởng đến mức độ ưu tiên là các bộ chọn chuyển đến hàm lớp giả. Chú ý ở đây tôi chỉ liệt kê lớp giả logic, không bao gồm lớp giả phi logic khác, chẳng hạn như 

  div + div { padding: 8px; }
  div > p { text-decoration: underline; }
  p ~ p { margin-bottom: 8px; }
  header h1 { font-size: 18px; }
  

  9, 

  * { color: #000 }
  

  10, v.v.

* { color: #000 }

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Cấp độ 1

• Bộ chọn loại, chẳng hạn như

  * { color: #000 }
  

  11

  * { color: #000 }
  

  12

  * { color: #000 }
  

  13

  * { color: #000 }
  

  14

* { color: #000 }

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Cấp độ 2

• Bộ chọn lớp học 

  * { color: #000 }
  

  15

* { color: #000 }

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

• bộ chọn thuộc tính

  * { color: #000 }
  

  16

div + div { padding: 8px; }
div > p { text-decoration: underline; }
p ~ p { margin-bottom: 8px; }
header h1 { font-size: 18px; }

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

• lớp giả chẳng hạn như

  div + div { padding: 8px; }
  div > p { text-decoration: underline; }
  p ~ p { margin-bottom: 8px; }
  header h1 { font-size: 18px; }
  

  9

  * { color: #000 }
  

  18

div + div { padding: 8px; }
div > p { text-decoration: underline; }
p ~ p { margin-bottom: 8px; }
header h1 { font-size: 18px; }

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

• phần tử giả chẳng hạn như

  * { color: #000 }
  

  19

div + div { padding: 8px; }
div > p { text-decoration: underline; }
p ~ p { margin-bottom: 8px; }
header h1 { font-size: 18px; }

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Cấp 3

• Bộ chọn ID

  * { color: #000 }
  

  70

div + div { padding: 8px; }
div > p { text-decoration: underline; }
p ~ p { margin-bottom: 8px; }
header h1 { font-size: 18px; }

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

cấp 4

• Kiểu nội tuyến trong thẻ html

div + div { padding: 8px; }
div > p { text-decoration: underline; }
p ~ p { margin-bottom: 8px; }
header h1 { font-size: 18px; }

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Cấp 5

• Từ khóa 

  * { color: #000 }
  

  71

div + div { padding: 8px; }
div > p { text-decoration: underline; }
p ~ p { margin-bottom: 8px; }
header h1 { font-size: 18px; }

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Từ khóa

* { color: #000 }

Chúng ta có thể thấy rằng từ mức 0 đến mức 3 là tất cả về mức độ ưu tiên của bộ chọn css, đây cũng là phần quan trọng nhất. Nếu chúng ta có thể hiểu đầy đủ về nó, chúng ta sẽ dễ dàng ghi đè kiểu hơn bằng cách sử dụng bộ chọn css

Mặc dù bây giờ chúng ta đã biết tất cả mức độ ưu tiên của các bộ chọn css, nhưng vẫn rất trừu tượng để chúng ta so sánh chúng khi có nhiều bộ chọn cùng nhau. Bạn có thể hỏi, làm thế nào chúng ta có thể so sánh

* { color: #000 }

* { color: #000 }

Đừng lo lắng, tôi cũng sẽ giải thích cách tính mức độ ưu tiên của bộ chọn css với các giá trị thực tế. Giả sử nếu bạn gặp một bộ chọn ưu tiên cấp 0, thì bạn thêm giá trị 0 vào tổng mức ưu tiên, nếu bạn gặp một bộ chọn ưu tiên cấp 1, thì bạn thêm 1 giá trị vào tổng mức ưu tiên, nếu bạn gặp một bộ chọn ưu tiên cấp 2, thì bạn . Tóm tắt

• cấp 0. +0
• Cấp độ 1. +1
• Cấp độ 2. +10
• Cấp 3. +100

Hãy xem một số ví dụ

1. * { color: #000 }
   

   75. 1 bộ chọn chung (mức 0), 1 bộ chọn css (mức 0), 1 bộ chọn loại (mức 1) nên tổng giá trị là 0 + 0 + 1 = 1

2. * { color: #000 }
   

   76. 2 bộ chọn loại (mức 1), 1 bộ kết hợp css (mức 0), 2 bộ chọn lớp (mức 2), 1 lớp giả logic (mức 0) nên tổng giá trị là 2 * 1 + 0 + 2 * 10 + 0

3. * { color: #000 }
   

   77. 1 bộ chọn loại (cấp 1), 1 bộ chọn thuộc tính (cấp 2) nên tổng giá trị là 1+ 10 = 11

4. * { color: #000 }
   

   78. 1 bộ chọn id (cấp 3), 1 bộ chọn css (cấp 0), 1 bộ chọn loại (cấp 1) nên tổng giá trị là 100 + 0 + 1 = 101

Đó là cách bạn tính giá trị priority trong css. Bây giờ bạn có thể hỏi nếu tôi thêm bộ chọn loại 11 thì giá trị là 11, vậy nó có thể ghi đè lên bộ chọn loại có giá trị 10 không? . Vì vậy, ngay cả khi bạn có 100 bộ chọn loại, bạn không thể ghi đè dù chỉ một bộ chọn lớp

Nếu bạn tình cờ viết 2 bộ bộ chọn để nhắm mục tiêu một phần tử và chúng có cùng giá trị ưu tiên, thì bộ chọn tiếp theo sẽ ghi đè bộ chọn trước đó. Đó là cách css được hiển thị trên web

Bộ chọn nào có mức độ ưu tiên cao nhất trong CSS?

Thứ tự ưu tiên của bộ chọn CSS là gì?

Ưu tiên của kiểu dáng trong CSS là gì?

Phương pháp tạo kiểu nào sau đây có mức độ ưu tiên cao nhất?