Bộ chọn CSS nào có độ đặc hiệu cao nhất

Cách tốt nhất để giải thích nó là bắt đầu với một ví dụ về nơi tính cụ thể trở nên khó hiểu và có lẽ không hoạt động như bạn mong đợi. Sau đó, chúng ta sẽ xem xét kỹ hơn cách tính giá trị độ đặc hiệu thực tế để xác định bộ chọn nào được ưu tiên

Đây là một danh sách không có thứ tự đơn giản

   
Whiskey and Ginger Ale
   
Wheat Beer
   
Mint Julip

Bây giờ bạn muốn chỉ định một trong những đồ uống yêu thích của mình và thay đổi kiểu dáng của nó một chút. Bạn cần một cái móc cho cái này để bạn áp dụng nó thông qua một tên lớp trên thành phần danh sách

   
Whiskey and Ginger Ale
   
Wheat Beer
   
Mint Julip

Bây giờ, bạn hãy mở CSS của mình và tạo kiểu cho lớp mới của mình

.favorite {
  color: red;
  font-weight: bold;
}

Sau đó, bạn xem lại công việc của mình, nhưng than ôi, nó không hoạt động. Văn bản của đồ uống yêu thích của bạn không chuyển sang màu đỏ hoặc đậm. Một cái gì đó tanh đang làm việc ở đây

Tìm hiểu thêm về CSS, bạn tìm thấy cái này

ul#summer-drinks li {
   font-weight: normal;
   font-size: 12px;
   color: black;
}

Có rắc rối của bạn ngay tại đó. Hai bộ chọn CSS khác nhau đang cho văn bản đó biết màu sắc và độ đậm của phông chữ. Chỉ có một câu lệnh cho cỡ chữ, rõ ràng đến mức câu lệnh đó sẽ có hiệu lực. Đây không phải là "xung đột" mỗi lần nói, nhưng trình duyệt cần phải quyết định một trong những câu lệnh này sẽ tôn trọng. Nó làm như vậy bằng cách tuân theo một bộ quy tắc cụ thể tiêu chuẩn

Tôi nghĩ điều này khiến một số người mới bắt đầu bối rối vì họ chưa giải quyết được vấn đề này. Họ có thể nghĩ rằng vì. câu lệnh yêu thích là “tiếp tục đi xuống trong CSS” hoặc bởi vì class=”favorite” “gần với văn bản thực tế hơn” trong HTML sẽ là câu lệnh “chiến thắng”

Trên thực tế, thứ tự của các bộ chọn trong CSS của bạn đóng một vai trò nào đó và bộ chọn “xuống dưới” trên thực tế sẽ thắng khi các giá trị đặc hiệu hoàn toàn giống nhau. Ví dụ

.favorite {
   color: red;
}
.favorite {
   color: black;
}

Màu sẽ là màu đen… nhưng tôi lạc đề rồi

Vấn đề ở đây là bạn muốn càng cụ thể càng tốt cho mọi cơ hội bạn có được. Ngay cả với ví dụ đơn giản được trình bày ở trên, cuối cùng bạn sẽ thấy rõ ràng rằng chỉ cần sử dụng tên lớp để nhắm mục tiêu “đồ uống yêu thích” đó sẽ không thành công hoặc sẽ không an toàn ngay cả khi nó hoạt động. Sẽ là thông minh nếu sử dụng cái này

ul#summer-drinks li.favorite {
  color: red;
  font-weight: bold;
}

Đó là những gì tôi gọi là "cụ thể như nó có ý nghĩa". Bạn thực sự có thể cụ thể hơn và sử dụng một cái gì đó như thế này

html body div#pagewrap ul#summer-drinks li.favorite {
  color: red;
  font-weight: bold;
}

Nhưng đó là trên đầu trang. Nó làm cho CSS của bạn khó đọc hơn và không mang lại lợi ích thực sự nào. Một cách khác để tăng giá trị đặc hiệu cho “. lớp yêu thích” là sử dụng. tuyên bố quan trọng

.favorite {
  color: red !important;
  font-weight: bold !important;
}

Tôi đã từng nghe nó nói rằng. quan trọng giống như thủ thuật tâm trí của Jedi đối với CSS. Quả thực đúng như vậy và bạn có thể ép buộc ý chí của mình đối với kiểu dáng của các phần tử bằng cách sử dụng nó. Nhưng mà. áp đặt quan trọng sẽ thông qua việc tăng đáng kể tính đặc hiệu của thuộc tính bộ chọn cụ thể đó

Các. tuyên bố quan trọng có thể dễ dàng bị lạm dụng nếu hiểu lầm. Nó được sử dụng tốt nhất để giữ cho CSS của bạn sạch hơn, trong các ví dụ mà bạn biết các phần tử với một bộ chọn lớp cụ thể nên sử dụng một bộ kiểu nhất định bất kể điều gì. Ngược lại, không được sử dụng chỉ như một cái nạng nhanh chóng để ghi đè kiểu dáng của thứ gì đó thay vì tìm hiểu cách tác giả gốc cấu trúc và hoạt động của CSS

Một trong những ví dụ cổ điển của tôi là

Tôi thường sử dụng nó trong các tình huống có nhiều khối nổi, cho khối cuối cùng bên phải liên tiếp. Điều đó đảm bảo rằng khối cuối cùng không có bất kỳ lề phải nào, điều này sẽ ngăn không cho nó húc khít vào cạnh phải của khối mẹ của nó. Mỗi khối đó có thể có các bộ chọn CSS cụ thể hơn áp dụng lề phải để bắt đầu, nhưng. quan trọng sẽ vượt qua điều đó và xử lý nó bằng một lớp đơn giản/sạch sẽ

Tính giá trị độ đặc hiệu của CSS

Tại sao nỗ lực thay đổi màu sắc và phông chữ đầu tiên của chúng tôi không thành công? . Các từ quan trọng trong câu đó là lớp và ID. CSS áp dụng các trọng số cụ thể rất khác nhau cho các lớp và ID. Trên thực tế, một ID có giá trị cụ thể hơn vô cùng. Nghĩa là, không có số lượng lớp nào có thể lớn hơn ID

Hãy cùng xem các con số được tính toán như thế nào

Nói cách khác

• Nếu phần tử có kiểu dáng nội tuyến, phần tử đó sẽ tự động1 thắng (1,0,0,0 điểm)
• Đối với mỗi giá trị ID, áp dụng 0,1,0,0 điểm
• Đối với mỗi giá trị lớp (hoặc lớp giả hoặc bộ chọn thuộc tính), áp dụng 0,0,1,0 điểm
• Đối với mỗi tham chiếu yếu tố, áp dụng 0,0,0,1 điểm

Nhìn chung, bạn có thể đọc các giá trị như thể chúng chỉ là một số, chẳng hạn như 1,0,0,0 là “1000” và do đó rõ ràng chiến thắng đối với độ đặc hiệu là 0,1,0,0 hoặc “100”. Dấu phẩy ở đó để nhắc nhở chúng tôi rằng đây không thực sự là hệ thống “cơ sở 10”, theo đó về mặt kỹ thuật, bạn có thể có giá trị độ đặc hiệu như 0,1,13,4 – và “13” đó không tràn ra như

tính toán mẫu

Cập nhật. Các. not() sort-of-pseudo-class tự nó không thêm tính đặc hiệu, chỉ những gì bên trong parens mới được thêm vào giá trị đặc hiệu

Kiểu CSS nào có tính đặc hiệu cao nhất?

Bộ chọn nào có tính đặc hiệu nhất?

Loại CSS nào là cụ thể nhất?

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