Các điểm trong tính đặc hiệu của CSS được tính như thế nào


124

Nghiên cứu tính cụ thể tôi tình cờ tìm thấy trên blog này - http://www.htminois.com/guides/cssadvified/specificity/

Nó nói rằng tính đặc hiệu là một hệ thống tính điểm cho CSS. Nó cho chúng ta biết rằng các yếu tố có giá trị 1 điểm, các lớp có giá trị 10 điểm và ID có giá trị 100 điểm. Nó cũng đi đầu nói rằng những điểm này được tính tổng và tổng số là tính đặc hiệu của bộ chọn.

Ví dụ:

cơ thể = 1 điểm
cơ thể .wrapper = 11 điểm
cơ thể .wrapper #container = 111 điểm

Vì vậy, bằng cách sử dụng các điểm này, tôi hy vọng CSS và HTML sau sẽ dẫn đến văn bản có màu xanh:

#a {
    color: red;
}

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
  color: blue;
}
<div class="a">
  <div class="b">
    <div class="c">
      <div class="d">
        <div class="e">
          <div class="f">
            <div class="g">
              <div class="h">
                <div class="i">
                  <div class="j">
                    <div class="k">
                      <div class="l">
                        <div class="m">
                          <div class="n">
                            <div class="o" id="a">
                              This should be blue.
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Tại sao văn bản có màu đỏ khi 15 lớp sẽ bằng 150 điểm so với 1 ID bằng 100 điểm?

Rõ ràng các điểm không chỉ là tổng số; chúng được nối lại. Đọc thêm về điều đó ở đây - http: // www. Wareandnonsense.co.uk/archives/css_specificity_wars.html

Điều đó có nghĩa là các lớp trong bộ chọn của chúng tôi = 0,0,15,0HOẶC 0,1,5,0?

(bản năng của tôi cho tôi biết đó là trước đây, vì chúng tôi BIẾT tính đặc hiệu của bộ chọn ID trông như thế này 0,1,0,0:)


Đây cũng là một điều kỳ lạ: stackoverflow.com/questions/25565928/
trộm

Câu trả lời:


137

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.

Tuy nhiên, như nhiều người đã chỉ ra, khuyến nghị CSS của W3C nói rằng "Ghép ba số abc (trong một hệ thống số có cơ sở lớn) mang lại tính đặc hiệu". Vì vậy, sự đam mê trong tôi chỉ cần tìm ra căn cứ này lớn như thế nào.

Nó chỉ ra rằng "cơ sở rất lớn" được sử dụng (ít nhất là bởi 4 trình duyệt được sử dụng phổ biến nhất * ) để thực hiện thuật toán tiêu chuẩn này là 256 hoặc 2 8 .

Điều này có nghĩa là một kiểu được chỉ định với 0 id và 256 tên lớp sẽ vượt quá một kiểu được chỉ định chỉ với 1 id. Tôi đã thử nghiệm điều này với một số câu đố:

Vì vậy, có một cách hiệu quả là một "hệ thống điểm", nhưng nó không phải là cơ sở 10. Đó là cơ sở 256. Đây là cách nó hoạt động:

(2 8 ) 2 hoặc 65536, nhân số lượng id trong bộ chọn
+ (2 8 ) 1 hoặc 256, nhân với số tên lớp trong bộ chọn
+ (2 8 ) 0 hoặc 1, nhân với số lượng thẻ- tên trong bộ chọn

Điều này không thực tế cho các bài tập ở phía sau để truyền đạt khái niệm.
Đó có lẽ là lý do tại sao các bài viết về chủ đề này đã được sử dụng cơ sở 10.

***** [Opera sử dụng 2 16 (xem bình luận của karlcow). Một số công cụ chọn khác sử dụng vô hạn - thực sự không có hệ thống điểm (xem bình luận của Simon Sapin).]

Cập nhật, tháng 7 năm 2014:
Như Blazemonger đã chỉ ra hồi đầu năm, các trình duyệt webkit (chrome, safari) giờ đây dường như sử dụng cơ sở cao hơn 256. Có lẽ 2 16 , như Opera? IE và Firefox vẫn sử dụng 256.


34
Quan trọng: lưu ý rằng số 256 không có trong thông số kỹ thuật . Vì vậy, câu trả lời này mô tả một chi tiết thực hiện (thừa nhận hữu ích).
Matt Fenwick

6
Không chỉ 256 không nằm trong thông số kỹ thuật như @MattFenwick đã nói, mà nó còn thay đổi theo cách thực hiện. Nó rõ ràng là lớn hơn trong Opera. Trong WeasyPrint và cssselect, nó là "vô cùng": Tôi sử dụng một bộ số nguyên thay vì một số nguyên.
Simon Sapin

3
Opera @Faust sử dụng 16 bit thay vì 8
karlcow

4
Câu trả lời này có một mô tả thực tế hơn câu trả lời của Pekka, phải trung thực. Về cơ bản những gì @Matt Fenwick nói: những gì bạn đang mô tả là một triển khai thực tế của thông số kỹ thuật. Một điều thiếu sót ở đó, nhưng không phải là điều mà bất cứ điều gì nên được thực hiện, có thể là bởi các tác giả hoặc người thực hiện.
BoltClock

7
256 dường như là không đủ trong các phiên bản hiện tại của webkit (Chrome và Safari), tiếp tục nhấn mạnh quan điểm của @ MattFenwick.
Blazemonger

28

Câu hỏi hay.

Tôi không thể chắc chắn - tất cả các bài viết tôi quản lý để tránh ví dụ về nhiều lớp, ví dụ ở đây - nhưng tôi cho rằng khi so sánh độ đặc hiệu giữa bộ chọn lớp và ID , lớp được tính với một giá trị của 15chỉ, cho dù nó chi tiết như thế nào.

Điều đó phù hợp với kinh nghiệm của tôi trong cách ứng xử cụ thể.

Tuy nhiên, phải có một số lớp học vì

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o

cụ thể hơn

.o

lời giải thích duy nhất tôi có là tính đặc hiệu của các lớp xếp chồng chỉ được tính với nhau chứ không phải đối với ID.

Cập nhật : Tôi đi được nửa đường rồi. Đây không phải là một hệ thống điểm và thông tin về các lớp có trọng lượng 15 điểm là không chính xác. Đây là một hệ thống đánh số gồm 4 phần được giải thích rất rõ ở đây .

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

style  id   class element
0,     0,   0,    0

Theo giải thích của W3C về tính đặc hiệu , các giá trị cụ thể cho các quy tắc nêu trên là:

#a            0,1,0,0    = 100
classes       0,0,15,0   = ... see the comments

đây là một hệ thống đánh số với số lượng rất lớn (không xác định?).

Theo tôi hiểu là vì cơ sở rất lớn, không có số nào trong cột 4 có thể đánh bại một số> 0 trong cột 3, tương tự cho cột 2, cột 1 .... Điều này có đúng không?

Tôi muốn biết liệu ai đó có khả năng nắm bắt toán học tốt hơn tôi có thể giải thích hệ thống đánh số thứ tự hay không và làm thế nào để chuyển đổi nó thành số thập phân khi các phần tử riêng lẻ lớn hơn 9.


Đó là bởi vì nó nằm giữa .o & .a .b vv Vì vậy, nó sẽ xem xét chúng chung. Nhưng giữa ID và một lớp, ví dụ: .a và #a ID sẽ luôn áp đảo. Nó sẽ (tôi giả sử) chỉ được tính giữa các lớp khi không có một attr áp đảo hơn. Ví dụ: lớp sẽ đi qua phần tử và id trên lớp.
Sphvn

@Ozaki đó là những gì tôi cũng đang giả sử, nhưng nó mâu thuẫn với những gì OP đang nói về hệ thống điểm. Phải có nhiều hơn trong chơi. Tôi muốn xem các quy tắc đằng sau nó.
Pekka

Chỉ cần nhận ra rằng cả hai chúng ta đều đi đến cùng một kết luận. Làm tốt lắm
Sam

5
Đối với phía toán học, chúng ta có thể làm việc trong cơ sở 16 ở đây (vì không có số nào vượt quá 15). Vậy 0,1,0,0 = 0100h = 256 0,0,15,0 = 00f0h = 240 256> 240 để bộ chọn id thắng.
Matthew Wilson

1
Có, bạn có thể nghĩ về các tính toán cụ thể như được thực hiện trong một hệ thống số có cơ sở lớn. Tôi nghĩ rằng thuật ngữ "concatenating" (cũng được sử dụng trong thông số kỹ thuật) là một mô tả tốt hơn nhiều mặc dù. (Đến đây từ việc trả lời một câu hỏi mới mà hóa ra là một người bị mắc mưu của thế này, con số đi ...)
BoltClock

9

Bản nháp làm việc cấp 4 hiện tại làm tốt công việc mô tả tính đặc hiệu trong CSS:

Độ đặc hiệu được so sánh bằng cách so sánh ba thành phần theo thứ tự: độ đặc hiệu với giá trị A lớn hơn cụ thể hơn; nếu hai giá trị A được gắn, thì độ đặc hiệu với giá trị B lớn hơn sẽ cụ thể hơn; nếu hai giá trị B cũng được gắn, thì độ đặc hiệu với giá trị c lớn hơn sẽ cụ thể hơn; nếu tất cả các giá trị được gắn, hai đặc tính bằng nhau.

Điều này có nghĩa là các giá trị A, B và C hoàn toàn độc lập với nhau.

15 lớp không cung cấp cho bộ chọn của bạn điểm số cụ thể là 150, nó mang lại cho nó giá trị B là 15. Một giá trị A duy nhất là đủ để áp đảo điều này.

Như một phép ẩn dụ, hãy tưởng tượng một gia đình có 1 cha mẹ lớn, 1 cha mẹ và 1 đứa con. Điều này có thể được đại diện là 1,1,1 . Nếu cha mẹ có 15 đứa con, điều đó không đột nhiên biến chúng thành cha mẹ khác ( 1,2,0 ). Điều đó có nghĩa là cha mẹ có trách nhiệm khủng khiếp hơn nhiều so với họ chỉ có 1 đứa con ( 1,1,15 ). ;)

Tài liệu tương tự cũng tiếp tục nói:

Do các giới hạn lưu trữ, việc triển khai có thể có các giới hạn về kích thước của A , B hoặc c . Nếu vậy, các giá trị cao hơn giới hạn phải được kẹp vào giới hạn đó và không được tràn.

Điều này đã được thêm vào để giải quyết vấn đề được trình bày trong câu trả lời của Faust , theo đó, việc triển khai CSS vào năm 2012 cho phép các giá trị tính đặc hiệu tràn vào nhau.

Trở lại năm 2012, hầu hết các trình duyệt đã thực hiện giới hạn 255, nhưng giới hạn này được phép tràn. 255 lớp có điểm đặc hiệu A, B, c0,255,0 , nhưng 256 lớp bị tràn và có điểm A, B, c1,0,0 . Đột nhiên giá trị B của chúng tôi trở thành giá trị A của chúng tôi . Tài liệu của Bộ chọn cấp 4 hoàn toàn giải quyết vấn đề đó bằng cách nói rằng giới hạn không bao giờ được phép tràn. Với cách triển khai này, cả 255 và 256 lớp sẽ có cùng điểm A, B, c0,255,0 .

Vấn đề được đưa ra trong câu trả lời của Faust đã được khắc phục trong hầu hết các trình duyệt hiện đại.


8

Tôi hiện đang sử dụng cuốn sách CSS Mastery: Giải pháp tiêu chuẩn web nâng cao .

Chương 1, trang 16 nói:

Để tính toán mức độ cụ thể của một quy tắc, mỗi loại bộ chọn được gán một giá trị số. Tính đặc hiệu của quy tắc sau đó được tính bằng cách cộng giá trị của từng bộ chọn. Thật không may, tính đặc hiệu không được tính trong cơ sở 10 mà là số cơ sở cao, không xác định. Điều này là để đảm bảo rằng bộ chọn đặc biệt cao, chẳng hạn như bộ chọn ID, không bao giờ bị ghi đè bởi rất nhiều bộ chọn ít cụ thể hơn, chẳng hạn như bộ chọn loại.

(nhấn mạnh của tôi) và

Tính đặc hiệu của bộ chọn được chia thành bốn cấp cấu thành: a, b, c và d.

  • nếu kiểu là kiểu nội tuyến thì a = 1
  • b = tổng số bộ chọn id
  • c = số lượng bộ chọn lớp, giả lớp và thuộc tính
  • d = số lượng bộ chọn loại và bộ chọn phần tử giả

Nó tiếp tục nói rằng bạn thường có thể thực hiện phép tính trong cơ sở 10, nhưng chỉ khi tất cả các cột có giá trị nhỏ hơn 10.


Trong ví dụ của bạn, id không có giá trị 100 điểm; mỗi [0, 1, 0, 0]điểm có giá trị Do đó, một id đánh bại 15 lớp vì [0, 1, 0, 0]lớn hơn [0, 0, 15, 0]trong hệ thống số cơ sở cao.


4

Tôi thích so sánh thứ hạng Cụ thể với bảng huy chương Thế vận hội Olympic (phương pháp vàng đầu tiên - trước tiên dựa trên số huy chương vàng, sau đó là bạc và sau đó là đồng).

Nó cũng hoạt động với câu hỏi của bạn (số lượng lớn các công cụ chọn trong một nhóm cụ thể). Tính cụ thể xem xét từng nhóm riêng biệt. Trong thế giới thực, tôi rất hiếm khi thấy trường hợp có hơn một chục bộ chọn).

Ngoài ra còn có máy tính đặc hiệu khá tốt có sẵn ở đây . Bạn có thể đặt ví dụ của bạn (#a và .a .b .c .d .e .f .g .h .i .j .k .l .m .n .o) ở đó và xem kết quả.

Ví dụ về bảng huy chương Thế vận hội Olympic Rio 2016 trông giống như nhập mô tả hình ảnh ở đây


3

Tôi không tin rằng lời giải thích của blog là chính xác. Các đặc điểm kỹ thuật ở đây:

http://www.w3.org/TR/CSS2/cascade.html#specificity

"Điểm" từ bộ chọn lớp không thể quan trọng hơn bộ chọn "id". Nó không hoạt động như vậy.


Giống như tôi đã nói trong câu trả lời của tôi. ^^ Tuy nhiên, nó sẽ tạo ra sự khác biệt nếu bạn có nhiều loại cùng loại (phần tử, lớp, id). Nhưng điều đó là khá rõ ràng nếu thứ 5 nói màu đỏ và 3 nói màu xanh cũng Ima chuyển sang màu đỏ.
Sphvn

Các từ ngữ xung quanh tính đặc hiệu có thể không thay đổi nhiều giữa CSS2 và CSS2.1, nhưng bạn thực sự nên chỉ ra thông số CSS2.1 trong các cuộc thảo luận trong tương lai vì nó hoàn toàn thay thế CSS2, nói chung bị phá vỡ tại thời điểm phát hành.
Robin Whittleton

1

Tôi sẽ nói rằng:

Element < Class < ID

Tôi nghĩ rằng họ chỉ xếp chồng vào nhau tùy thuộc vào những gì bạn nhận được nếu nó là bội số của cùng một. Vì vậy, một Class sẽ luôn luôn bao phủ phần tử và ID luôn trên Class nhưng nếu nó nằm trong số 4 phần tử trong đó 3 là màu xanh và 1 là màu đỏ thì nó sẽ có màu xanh.

Ví dụ:

.a .b .c .d .e .f .g .h .i .j .k .l
{
color: red;
}

 .m .n .o
{
color blue;
}

Nên biến thành màu đỏ.

Xem ví dụ http://jsfiddle.net/RWFWq/

"nếu thứ 5 nói màu đỏ và 3 nói màu xanh cũng ima đi màu đỏ"

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.