Có thể kiểm tra các kiểu "được tính toán" cho :: after và :: trước các phần tử giả không?

Question

Chrome hiển thị cho tôi các định nghĩa ::after và ::before (và các định nghĩa kế thừa, v.v.) trong các Quy tắc CSS được đối sánh được đối sánh khi tôi kiểm tra phần tử. Nhưng khung Kiểu tính toán chỉ hiển thị các kiểu được tính cho phần tử gốc.

Tôi có toàn bộ phân cấp lớp CSS cho các phần tử giả với một số thuộc tính được kế thừa và một số ghi đè vv và muốn biết có cách nào tôi có thể xem tập hợp các kiểu thực sự được áp dụng hay không. ngăn kiểu hiển thị cho phần tử gốc)

Nếu ai cũng có thể làm sáng tỏ điều này, điều đó sẽ cực kỳ hữu ích.

Edit - 13 tháng hai 2014

các phiên bản gần đây của Chrome thực sự có tính năng này được xây dựng trong Có lẽ chủ đề này ít có cái gì để làm với họ trong đó có nó ?? :-)

Answer 1

Vâng, mặc dù nó không phải là tất cả những gì rõ ràng. Nếu bạn đang sử dụng Firebug, bạn cần đảm bảo rằng trên tab thả xuống kiểu, bạn đã chọn "Chỉ hiển thị kiểu ứng dụng". Sau đó, như bạn có thể nhìn thấy từ ảnh chụp màn hình dưới đây, bạn sẽ có thể chọn các yếu tố giả và xem phong cách của họ tính toán (hoặc phong cách được áp dụng) sẽ đưa vào xem xét bất kỳ ghi đè, vv

Answer 2

window.getComputedStyle(element[, pseudoElt])

pseudoElt Tùy chọn

Một chuỗi xác định giả yếu tố để phù hợp. Phải được bỏ qua (hoặc null) cho các phần tử thông thường. Các lớp giả có thể được chỉ định như ": focus".

Tôi có thể hiểu nhầm những gì bạn đang cố gắng hoàn thành, nhưng đây là một số JavaScript để chơi cùng. Tôi hy vọng nó hữu ích.

Nó lặp qua mọi phần tử trong tài liệu và cố gắng lấy số content trong số :before s và :after s.
Nếu tìm thấy bất kỳ thông tin nào, nó sẽ xuất ra các chi tiết về số console.
Đơn giản nhưng có thể chứng minh được.

document.querySelectorAll("*").forEach((e) => { 
 
    const ebc = window.getComputedStyle(e, ":before").content, 
 
     eac = window.getComputedStyle(e, ":after").content; 
 
    if (ebc || eac) { 
 
    console.log(e); 
 
    console.log((ebc ? "Before content = " + ebc : "No :before content")); 
 
    console.log((eac ? "After content = " + eac : "No :after content")); 
 
    } 
 
});

div:before { 
 
    content: "This is a test."; 
 
} 
 
p:after { 
 
    content: attr(data-content); 
 
} 
 
span:after { 
 
    content: " dolor"; 
 
}

<div> 
 
    <p data-content="&hellip;">Lorem <span>ipsum</span></p> 
 
</div>