Làm cách nào để xem tính đặc hiệu CSS được tính của trình duyệt?

Question

Lời chào: Tôi đã dành nhiều ngày cố gắng tìm một công cụ sẽ hiển thị số lượng đặc trưng CSS chính xác cho từng quy tắc CSS như được tính toán bởi trình duyệt. Tôi đã xem xét nhiều tài nguyên trực tuyến bao gồm Tools to see CSS specificity - các liên kết ở đó nói về các lớp bị ghi đè vv nhưng tôi muốn xem số cụ thể chính xác được trình duyệt tính toán và sử dụng khi áp dụng các quy tắc CSS cụ thể.

Tại sao tôi cần xem tính toán độ chính xác của CSS chính xác?
Tôi không thể khắc phục vấn đề nhất định khi trình duyệt đang sử dụng quy tắc CSS dựa trên sự gần gũi của quy tắc đó với phần tử nhưng tôi có một quy tắc khác được xác định trước khi nó phải có độ đặc hiệu cao hơn quy tắc được trình duyệt áp dụng. Tôi không có một mã đơn giản mà tôi có thể sử dụng để chứng minh bằng cách sử dụng jsfiddle và mã tôi đang cố gắng gỡ lỗi là quá phức tạp để bao gồm trong fiddle.

Hầu hết mọi tìm kiếm đều dẫn đến việc mọi người trỏ đến một số loại liên kết "quy tắc cụ thể CSS" hoặc "hiểu sự cụ thể về CSS". Tôi hiểu cách hoạt động của CSS cụ thể, sử dụng công cụ dành cho nhà phát triển Firebug và Chrome rộng rãi và nhận thức rõ ràng về các liên kết trỏ đến việc hiểu các quy tắc cụ thể. Nhiệm vụ của tôi là cố gắng tìm hiểu xem công cụ trình duyệt nghĩ gì khi áp dụng một quy tắc CSS này cho quy tắc khác! Và vì nó đã tính toán thông tin này để quyết định quy tắc nào ghi đè các quy tắc khác, bằng cách nào đó nó phải là thông tin có thể truy cập được, nhưng tôi không biết làm cách nào?

Một ví dụ rất cơ bản của vấn đề tôi đang phải đối mặt: (. Không thực hiện bất kỳ khác nhau trong kết quả cuối cùng)

.testClass1 .title, .testClass2 .testClass1 .title { corresponding CSS styles } 
.testClass2 .title, .testClass1 .testClass2 .title { corresponding CSS styles } 

Hoặc nó có thể được mã hóa một cái gì đó như thế này ....

.testClass1 .title { corresponding CSS styles }  --- call it Rule 1 
.testClass2 .testClass1 .title { corresponding CSS styles } --- call it Rule 2 
.testClass2 .title { corresponding CSS styles } --- call it Rule 3 
.testClass1 .testClass2 .title { corresponding CSS styles } --- call it Rule 4 

Và cấu trúc HTML trông giống như thế này ...

<!-- delivers intended results --> 
<div class="testClass1"> 
    <div class="title">Some Title</div> 
</div> 

<!-- Does not deliver intended results. 
    - I expected Rule 1 or Rule 2 to take effect, but Rule 3 gets 
    applied because of its proximity to the actual HTML element. 
    i.e. rule 3 is defined later in CSS then rule 1 and 2. --> 
<div class="testClass2"> 
    <div class="testClass1"> 
    <div class="title">Some Title</div> 
    </div> 
</div> 

tôi nghĩ cách tốt nhất để gỡ lỗi này là kiện sẽ là để xem tính toán độ đặc hiệu CSS của trình duyệt thay vì tôi phải giả định các quy tắc nhất định và tính toán theo cách thủ công mỗi lần. Ngoài ra, trình duyệt đã tính toán điều này trong khi áp dụng nó, vì vậy tôi đang tìm kiếm các công cụ để xem xét tính toán trình duyệt của các quy tắc cụ thể này nhưng không thể tìm thấy bất kỳ cách nào để thực hiện nó trong trình kiểm tra Firebug hoặc Chrome.

Có ai khác ngoài kia biết điều này và có ai có thể chỉ cho tôi một công cụ có thể tồn tại không? Tôi thật sự đánh giá cao sự giúp đỡ của bạn. Cảm ơn bạn!

CHỈNH SỬA: Tôi đã cố gắng tổng hợp lại để xem liệu tôi có thể tái sản xuất "một cái gì đó giống như những gì tôi đang đấu tranh" để chứng minh. Tôi đoán, tôi may mắn - vui lòng xem http://jsfiddle.net/smallworld/abvHC/1/. Vấn đề trong fiddle này vẫn còn quá đơn giản, nhưng loại đại diện của thách thức của tôi, nơi các lớp học được gán động nên tôi không có cách nào để dự đoán thứ tự chính xác. Ví dụ 3 trong fiddle là một phần của một trường hợp đại diện của lý do tại sao tôi cần phải xem tính đặc hiệu được tính toán. Trong mọi trường hợp, tôi nghĩ sẽ thật tuyệt vời khi có thể so sánh số được tính toán của bạn với tính toán của trình duyệt.

KHÁC EDIT: Trong khi tôi vẫn không có câu trả lời cho cuộc tìm kiếm của tôi cho một peek vào điểm đặc hiệu của trình duyệt cho một yếu tố nào đó, tôi nghĩ rằng Faust và những người khác đã dẫn tôi đến một giải pháp khả thi cho vấn đề ban đầu tôi đã phải đối mặt. Vui lòng xem chuỗi nhận xét bên dưới.Xem xét câu hỏi đó là về việc có thể xem điểm cụ thể của trình duyệt, tôi cũng có thể để câu hỏi này mở - câu trả lời rất có thể là hiện tại không có công cụ nào để có thể làm như vậy.

Answer 1

Có một số getSpecificity() function có sẵn tại API inIDOMUtils trong Firefox.

Để sử dụng API này, bạn sẽ phải tự viết tiện ích Firefox của riêng mình. Đây là was requested for Firebug, mặc dù Firebug is discontinued hiện có lợi cho Firefox DevTools, cũng có một số feature request for this.

Answer 2

Tôi đã sử dụng Firebug addon trong Firefox. Cho đến nay có hiệu quả đối với tôi.

Answer 3

Nếu bạn muốn xem trình duyệt của họ đang nghĩ gì, hãy nhấn F12 trong IE hoặc truy cập nguồn trong trình duyệt khác. Nhấn vào thẻ HTML mà bạn muốn xem css mà nó đang nghĩ đến. Sau đó nó xuất hiện ở phía bên phải các dòng thông qua mã bị bỏ qua. hy vọng điều đó sẽ hữu ích.