Hướng dẫn selector specificity 0, 0, 1 expectedcss css lcurlyexpected - độ đặc hiệu của bộ chọn 0, 0, 1 dự kiến ​​css css lcurlye dự kiến

Studio Visual của tôi tiếp tục hiển thị cảnh báo sau (tôi nghĩ rằng đó thực sự là plugin Web Essentials tạo ra nó) nhưng tôi không thực sự rõ ràng tại sao đây là một vấn đề? Một số người có thể giải thích xin vui lòng?

Tái bút, vâng tôi hiểu tính đặc thù là gì và làm thế nào để tính toán nó, tôi chỉ không biết tại sao tính đặc hiệu của

   
Whiskey and Ginger Ale
   
Wheat Beer
   
Mint Julip

   
Whiskey and Ginger Ale
   
Wheat Beer
   
Mint Julip

Hỏi ngày 14 tháng 4 năm 2015 lúc 9:12Apr 14, 2015 at 9:12

3

Trên đây không phải là thông báo lỗi, đó là thông tin lơ lửng tiêu chuẩn khi bạn di chuyển chuột qua bộ chọn với chúng tôi. Tuy nhiên, vấn đề bạn đang gặp phải có lẽ là cùng một bộ chọn được chỉ định hai lần trong cùng một tệp.

Đã trả lời ngày 14 tháng 4 năm 2015 lúc 9:36Apr 14, 2015 at 9:36

EtheryteetheryteEtheryte

23.8K11 Huy hiệu vàng67 Huy hiệu bạc110 Huy hiệu đồng11 gold badges67 silver badges110 bronze badges

Câu trả lời của Pekka thực tế là chính xác, và có lẽ là cách tốt nhất để suy nghĩ về vấn đề này.

Điểm bắt đầu là 4 con số:

style  id   class element
0,     0,   0,    0

Vì vậy, trong trường hợp của bạn, bạn đã sử dụng 2 tên lớp để nó hiển thị là 2 ở giữa.

Đã trả lời ngày 14 tháng 4 năm 2015 lúc 9:18Apr 14, 2015 at 9:18

0

DigitalOcean cung cấp các sản phẩm đám mây cho mọi giai đoạn của hành trình của bạn. Bắt đầu với $ 200 trong tín dụng miễn phí!

Hãy để cụ thể bao gồm chủ đề này. (Rimshot!)

Cách tốt nhất để giải thích nó là bắt đầu với một ví dụ về nơi đặc thù trở nên khó hiểu và có lẽ không hành xử như bạn mong đợi. Sau đó, chúng tôi 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.

Dưới đây là một danh sách đơn giản không theo thứ tự:

   
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 bạn 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 việc này để bạn áp dụng nó thông qua một tên lớp trên phần tử danh sách.

   
Whiskey and Ginger Ale
   
Wheat Beer
   
Mint Julip

Bây giờ bạn mở CSS của bạn và thực hiện kiểu dáng của bạn cho lớp học mới của bạn:

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

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

Thịt xung quanh nhiều hơn trong CSS, bạn tìm thấy điều 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 nói rằng văn bản đó màu sắc và trọng lượng phông chữ nào. Chỉ có một tuyên bố cho kích thước phông chữ, vì vậy rõ ràng là người ta sẽ có hiệu lực. Những cuộc xung đột của aren này, những người khác, nhưng trình duyệt không cần phải quyết định một trong những tuyên bố này để tôn vinh. Nó làm như vậy bằng cách tuân theo một bộ quy tắc đặc hiệu tiêu chuẩn.

Tôi nghĩ rằng điều này gây nhầm lẫn cho một số người mới bắt đầu bởi vì họ đã nhận được điều này được sắp xếp. Họ có thể nghĩ bởi vì câu lệnh .favorite là một người khác trong CSS, hoặc vì lớp = yêu thích là gần với văn bản thực tế hơn trong HTML sẽ là người mà 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ò và thực tế, người ta thực sự sẽ giành chiến 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ắc sẽ là màu đen nhưng tôi lạc đề.

Vấn đề ở đây là bạn muốn được cụ thể vì nó có ý nghĩa khi mọi cơ hội bạn có được. Ngay cả với một ví dụ đơn giản được trình bày ở trên, cuối cùng bạn cũng sẽ trở nên rõ ràng rằng chỉ đơn giản là sử dụng một tên lớp để nhắm mục tiêu rằng thức uống yêu thích của họ, đó là việc cắt nó, hoặc giành được rất an toàn ngay cả khi nó hoạt động. Sẽ rất thông minh khi sử dụng điều này:you want to be as specific as it makes sense to be every chance you get. Even with the simple example presented above, it will become obvious to you eventually that simply using a class name to target that “favorite drink” isn’t going to cut it, or won’t be very safe even if it did work. It would have been smart to use this:

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

Đó là những gì tôi gọi là người khác là cụ thể vì nó có ý nghĩa khi được. Bạn thực sự có thể là cách 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. Nó làm cho CSS của bạn khó đọc hơn và mang lại lợi ích thực sự. Một cách khác để nâng cao giá trị đặc hiệu cho lớp .Favorite của bạn 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í Jedi cho CSS. Thật vậy, đó là, và bạn có thể ép buộc ý chí của bạn về kiểu dáng của các yếu tố bằng cách sử dụng nó. Nhưng! Quan trọng áp đặt điều đó sẽ thông qua việc tăng mạnh tính đặc hiệu của tài sản chọn lọc cụ thể đó.

Tuyên bố quan trọng có thể dễ dàng sử dụng sai nếu bị 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 yếu tố với một bộ chọn lớp cụ thể nên sử dụng một tập hợp kiểu dáng nhất định bất kể điều gì. Ngược lại, không được sử dụng như một cái nạng nhanh để ghi đè kiểu tạo kiểu của một thứ gì đó thay vì tìm ra cách CSS được cấu trúc và làm việc bởi tác giả ban đầu.

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

.last {
   margin-right: 0 !important;
}

Tôi thường sử dụng điều đó 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 khối cuối cùng không có bất kỳ biên độ nào sẽ ngăn nó hích một cách khít với cạnh phải của cha mẹ. Mỗi khối đó có thể có các bộ chọn CSS cụ thể hơn áp dụng lề phù hợp để bắt đầu, nhưng! Quan trọng sẽ vượt qua điều đó và chăm sóc nó với một lớp đơn giản/sạch sẽ.

Tính toán giá trị đặc hiệu CSS

Tại sao nỗ lực đầu tiên của chúng tôi trong việc thay đổi màu sắc và trọng lượng phông chữ thất bại? Như chúng tôi đã học, đó là bởi vì chỉ đơn giản là sử dụng tên lớp có giá trị đặc hiệu thấp hơn và bị thổi phồng bởi bộ chọn khác nhắm vào danh sách không đặt hàng với giá trị ID. Những từ quan trọng trong câu đó là lớp và id. CSS áp dụng các trọng số đặc hiệu rất khác nhau cho các lớp và ID. Trong thực tế, một ID có giá trị đặc hiệu hơn vô hạn! Đó là, không có số lượng lớp học một mình có thể vượt xa ID.class and ID. CSS applies vastly different specificity weights to classes and IDs. In fact, an ID has infinitely more specificity value! That is, no amount of classes alone can outweigh an ID.

Hãy cùng xem cách các con số thực sự được tính toán:

Nói cách khác:

• Nếu phần tử có kiểu dáng nội tuyến, thì tự động1 sẽ 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 bộ chọn thuộc tính hoặc lớp giả), áp dụng 0,0,1,0 điểm
• Đối với mỗi tham chiếu phần tử, áp dụng 0,0,0,1 điểm

Nói chung, bạn có thể đọc các giá trị như thể chúng chỉ là một con số, như 1,0,0,0 là 1000 1000, và do đó rõ ràng chiến thắng trong một tính đặc hiệu là 0,1,0,0 hoặc 100 100. Các dấu phẩy ở đó để nhắc nhở chúng ta rằng đây không thực sự là một hệ thống cơ sở 10 cơ sở, trong đó về mặt kỹ thuật bạn có thể có một giá trị đặc hiệu là 0,1,13,4 - và đó là 13 Một hệ thống cơ sở 10 sẽ.

Tính toán mẫu

CẬP NHẬT: The: Not () Sắp xếp pseudo-Class không thêm tính đặc hiệu, chỉ những gì mà bên trong parens được thêm vào giá trị đặc hiệu. The :not() sort-of-pseudo-class adds no specificity by itself, only what’s inside the parens is added to specificity value.

Ghi chú quan trọng

• Bộ chọn phổ quát (*) không có giá trị độ đặc hiệu (0,0,0,0)
• Các yếu tố giả (ví dụ: dòng đầu tiên) nhận được 0,0,0,1 không giống như anh em lớp psuedo của họ nhận được 0,0,1,0
• Lớp giả: không () không thêm tính đặc hiệu, chỉ có những gì mà bên trong nó có dấu ngoặc đơn.
• Giá trị quan trọng được thêm vào giá trị thuộc tính CSS là một chiến thắng tự động. Nó ghi đè ngay cả các kiểu nội tuyến từ đánh dấu. Cách duy nhất một giá trị quan trọng có thể được ghi đè là với một quy tắc quan trọng khác! Bạn có thể nghĩ về nó như thêm 1,0,0,0,0 vào giá trị độ đặc hiệu.!important value appended a CSS property value is an automatic win. It overrides even inline styles from the markup. The only way an!important value can be overridden is with another!important rule declared later in the CSS and with equal or great specificity value otherwise. You could think of it as adding 1,0,0,0,0 to the specificity value.

Tài nguyên

• Tạp chí Smashing có một bài viết khá toàn diện về tính đặc hiệu của CSS
• W3 Spec về tính đặc hiệu trong CSS3
• IE Quirks (thử xem trang này trong FX và sau đó là IE)
• Hack tính cụ thể mờ: IE (thậm chí beta 8!) Và trình duyệt opera cũ hơn có một lỗi tôn vinh bộ chọn chính xác trong các trường hợp cụ thể.

Tính đặc hiệu của CSS của bộ chọn là gì?

Bộ chọn CSS nào có giá trị đặc hiệu nhất?

Tính đặc hiệu của CSS có nghĩa là gì?