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

Vì trình duyệt chỉ có thể chọn một màu để áp dụng cho đoạn này, nên nó sẽ phải quyết định quy tắc CSS nào sẽ được ưu tiên hơn các quy tắc khác. Đây là mức độ ưu tiên của CSS (hoặc tính đặc hiệu của CSS)

Trong ví dụ của chúng tôi, đoạn văn sẽ có màu đỏ vì bộ chọn

p{ color: blue;}

7 cụ thể hơn và do đó quan trọng hơn các bộ chọn khác

Thứ tự các quy tắc CSS

Nếu các bộ chọn tương tự nằm trong CSS của bạn, thì bộ chọn cuối cùng được xác định sẽ được ưu tiên

p{ color: green;}
p{ color: red;}
/* Paragraphs will be red */

thước đo 100

Một cách nhanh chóng để tìm ra mức độ “mạnh mẽ” của quy tắc CSS là bằng cách đo tính đặc hiệu của bộ chọn

• Bộ chọn

  p{ color: blue;}

  7 có giá trị 100
• Bộ chọn

  p{ color: blue;}

  9 có giá trị 10

• p{ color: blue;}

  0 bộ chọn có giá trị 1

Bộ chọn có “điểm số” cao nhất sẽ chiếm ưu thế, bất kể thứ tự xuất hiện của các quy tắc CSS

#introduction{ color: red;}
.message{ color: green;}
p{ color: blue;}

 class="message" id="introduction">
  MarkSheet is a free HTML and CSS tutorial.

MarkSheet là một hướng dẫn HTML và CSS miễn phí

Quy tắc

p{ color: blue;}

1 cụ thể hơn các quy tắc khác vì id phải là duy nhất trong toàn bộ trang web và do đó chỉ có thể nhắm mục tiêu một phần tử

p{ color: blue;}

2 có thể nhắm mục tiêu bất kỳ phần tử HTML nào có thuộc tính

p{ color: blue;}

3 và do đó ít cụ thể hơn. Điều tương tự cũng xảy ra với

p{ color: blue;}

4 có thể nhắm mục tiêu bất kỳ đoạn HTML nào

Làm thế nào để tránh xung đột

Trong khi viết CSS của bạn, thật dễ dàng để viết các quy tắc xung đột, trong đó cùng một thuộc tính được áp dụng nhiều lần

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 chặt chẽ. 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

• , 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

________số 8

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, 

  p{ color: blue;}

  90, v.v.

p{ color: blue;}

9

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ư

  p{ color: blue;}

  91

  p{ color: blue;}

  92

  p{ color: blue;}

  93

  p{ color: blue;}

  94

#introduction{ color: red;}
.message{ color: green;}
p{ color: blue;}

5

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 

  p{ color: blue;}

  95

#introduction{ color: red;}
.message{ color: green;}
p{ color: blue;}

7

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

  p{ color: blue;}

  96

#introduction{ color: red;}
.message{ color: green;}
p{ color: blue;}

9

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

  p{ color: blue;}

  98

 class="message" id="introduction">
  MarkSheet is a free HTML and CSS tutorial.

2

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ư

  p{ color: blue;}

  99

 class="message" id="introduction">
  MarkSheet is a free HTML and CSS tutorial.

4

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

  #introduction{ color: red;}
  .message{ color: green;}
  p{ color: blue;}

  50

 class="message" id="introduction">
  MarkSheet is a free HTML and CSS tutorial.

6

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

 class="message" id="introduction">
  MarkSheet is a free HTML and CSS tutorial.

7

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

Cấp 5

• Từ khóa 

  #introduction{ color: red;}
  .message{ color: green;}
  p{ color: blue;}

  51

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

0

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

Từ khóa

#introduction{ color: red;}
.message{ color: green;}
p{ color: blue;}

51 có độ ưu tiên cao nhất, thường nó được dùng để ghi đè style javascript, nếu không thì mình khuyên không nên dùng, nếu lạm dụng sẽ khó bảo trì code. từ khóa quan trọng

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

#introduction{ color: red;}
.message{ color: green;}
p{ color: blue;}

53 với

#introduction{ color: red;}
.message{ color: green;}
p{ color: blue;}

54?

Đừ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. #introduction{ color: red;}
   .message{ color: green;}
   p{ color: blue;}

   55. 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. #introduction{ color: red;}
   .message{ color: green;}
   p{ color: blue;}

   56. 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. #introduction{ color: red;}
   .message{ color: green;}
   p{ color: blue;}

   57. 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. #introduction{ color: red;}
   .message{ color: green;}
   p{ color: blue;}

   58. 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

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

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

Bộ chọn CSS nào là tốt nhất?

Tại sao CSS nội tuyến có mức độ ưu tiên cao nhất?