Ưu tiên CSS quan trọng

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

* {

  màu nền. đen;

}

#button-wrapper. nút {

  màu nền. đỏ;

}

.button:hover {

  màu nền. xanh;

}

#button {

  màu nền. xanh dương;

}

div#button-wrapper. button[type="submit"] {

  màu nền. cam;

}

selectorinlineIDsclasseselements*0000#button-wrapper. nút0110. cái nút. hover0020#button0100div#button-wrapper. nút[loại="gửi"]0121

Này, điều đó thực sự có nghĩa là nút sẽ không thay đổi màu sắc khi di chuột. Tất cả các bộ chọn khác cụ thể hơn. cái nút. bay lượn

Đó là một trong những lý do tại sao tôi không bao giờ sử dụng ID khi tạo kiểu và tôi khuyên bạn cũng nên làm như vậy. Tại một số điểm, bạn có thể phát hiện ra rằng để thay đổi bất kỳ thứ gì, bạn cần phải thêm cả ID vào các phần tử trong HTML và bộ chọn css của bạn rất thường xuyên. Bạn cũng có thể dễ dàng suy luận rằng các kiểu nội tuyến có trọng số nhất và cụ thể nhất. Ngoài ra, hãy lưu ý rằng bộ chọn chung * không có giá trị cụ thể. điều đó có nghĩa là mọi bộ chọn khác sẽ cụ thể hơn

Bạn cũng có thể rơi vào một cạm bẫy khác ở đây. Mặc dù loại nút mặc định là gửi, nhưng bộ chọn sẽ không áp dụng cho nút đó trừ khi bạn nêu cụ thể loại. Điều đó có nghĩa là bộ chọn cuối cùng của chúng tôi thậm chí sẽ không thành vấn đề

css quan trọng

Nếu bạn cảm thấy muốn sử dụng. quy tắc quan trọng vì bất kỳ lý do gì, giữ ngựa của bạn. Vụ việc có thể chưa phải là một thảm họa hoàn toàn. Bạn có thể dễ dàng áp dụng kiến ​​thức này vào thực tế

1

2

3

4

5

6

7

.button {

  màu nền. đỏ;

}

.button.button {

  màu nền. xanh;

}

Trong bộ chọn thứ hai, bạn thực sự đang tìm kiếm một phần tử có cả hai. nút và. lớp nút - không cần phải có hai lần. Do đó, tính đặc hiệu của bộ chọn thứ hai ngày càng tăng. Bang, vấn đề đã được giải quyết. Đặc biệt nếu bạn tránh sử dụng ID trong bộ chọn của mình. Điều đó không có nghĩa là nó là một thực hành tốt mặc dù. nhưng chắc chắn tốt hơn so với sử dụng. quan trọng và ID. Nó đứng như một cái ác ít hơn. Quản lý tính đặc hiệu của bộ chọn của bạn một cách thông minh và bạn sẽ không cần phải dùng đến các phương pháp như vậy

Nguồn đặt hàng

Khi cả tầm quan trọng và tính đặc hiệu đều có trọng số như nhau, phương sách cuối cùng là thứ tự các quy tắc đã được tuyên bố. Trong trường hợp này, cái cuối cùng sẽ được áp dụng. Đơn giản vậy thôi

Tóm lược

Sử dụng. quy tắc quan trọng không phải là một ý tưởng hay nếu bạn muốn viết mã có thể bảo trì. Một cách tốt hơn là tăng tính đặc hiệu của bộ chọn. Lưu ý rằng bộ chọn chứa 1 ID cụ thể hơn bộ chọn có 1000 lớp và đó là lý do tại sao tôi khuyên bạn không nên sử dụng ID. Bạn cũng cần nhớ rằng thứ tự nguồn cũng đóng một vai trò ở đây, đó là lý do tại sao nên đặt biểu định kiểu của bạn sau bất kỳ kiểu của bên thứ 3 nào. Ghi nhớ tất cả các quy tắc đó sẽ giúp bạn viết mã rõ ràng và có thể bảo trì để dễ dàng sửa đổi sau này

Ưu tiên chính xác trong kiểu CSS là gì?

Cái nào được ưu tiên cao trong CSS?

Tầm quan trọng của quan trọng trong CSS là gì?

Thứ tự có quan trọng trong CSS không?