Bộ chọn thuộc tính Chrome và CSS

Question

Tôi có mã HTML sau, nơi tôi muốn định dạng với định dạng dữ liệu css (đến từ xml) mà không thể thay đổi được.

Tôi phải cung cấp các kiểu khác nhau cho các phần tử có giá trị thuộc tính khác nhau. Tôi đã nghĩ sử dụng bộ chọn thuộc tính CSS.

body { 
    background-color: black 
} 
s { 
    text-decoration: none 
} 
f { 
    color: black; 
    text-decoration: none; 
    display: block; 
} 
f[type=h2] { 
    color: green 
} 
f[type=p] { 
    color: blue 
} 
f[type=speech] { 
    color: yellow 
} 
f[type=other] { 
    color: gray 
} 

<b> 
    <s> 
    <f type="h2">Title</f> 
    <f type="p">Paragraph</f> 
    <f type="speech">Dialgoue</f> 
    <f type="other" br="true">Other</f> 
    <f type="p">Paragraph</f> 
    <f type="p">Paragraph</f> 
    </s> 
</b> 

Trong Firefox trang được trả lại như tôi mong đợi (h2 trong xanh, p màu xanh lam, speech trong yelllow và khác màu xám). Trong chrome tất cả mọi thứ là màu xanh lá cây.

Làm cách nào để có được kết quả Firefox trong Chrome?

Answer 1

Vì một số lý do không xác định, Chrome khá nghiêm ngặt đối với thẻ HTML, do đó quy tắc CSS sẽ không hoạt động tốt trong trình duyệt đã nói.

Một đề xuất, tại sao bạn không style the XML thay thế?

Answer 2

Thay đổi tên attr sẽ giúp bạn, andi không có ý tưởng tại sao

 <f custom="p">Paragraph</f> 
     <f custom="speech">Dialgoue</f> 
     <f custom="other" br="true">Other</f> 
     <f custom="p">Paragraph</f> 
     <f custom="p">Paragraph</f> 


    <style type="text/css"> 
     f[custom=h2] { 
      color: green; 
     } 
     f[custom=p] { 
      color: blue; 
     } 
     f[custom=speech] { 
      color: yellow; 
     } 
     f[custom=other] { 
      color: gray; 
     } 
    </style> 

Answer 3

HTML của bạn không hợp lệ. Nếu bạn chạy nó thông qua trình xác nhận hợp lệ, nó sẽ phát ra các lỗi vì nó không giống như các thẻ XML được nhúng có tên.

Theo HTML/XML Task Force Report:

Khi một phân tích cú pháp HTML5 gặp đánh dấu không quen thuộc, nó giả định rằng đánh dấu như là một nỗ lực sai lầm để tạo HTML5 được xác định rõ. Do đó, nó áp dụng các chiến lược sửa lỗi dẫn đến một biểu diễn DOM có thể khác hoàn toàn với DOM mà một trình phân tích cú pháp XML đã tạo ra. Đặc biệt, các phần tử mở có thể kết thúc sớm và các phần tử bổ sung có thể được mở ra.

Kết quả thực tế là một hòn đảo XML “khỏa thân” trong một tài liệu HTML5 sẽ không tạo ra một cách đáng tin cậy bất kỳ thứ gì giống với DOM mà người ta mong đợi từ việc kiểm tra ngẫu nhiên đảo XML.

Vì vậy, Chrome có quyền của mình để có quyền sử dụng ở đây, vì về mặt kỹ thuật bạn đã làm điều đó trước tiên. Lưu ý là làm thế nào (trong trình duyệt Chrome của tôi) all the elements are green (http://jsfiddle.net/qJMWg/) - điều này cho thấy rằng vì một lý do nào đó mà tất cả mọi thứ chúng được lồng trong một phần tử lớn <f type="h2">. Đó là lưu ý vì HTML có chứa một thẻ <b> và <s>, vì vậy <f> là thẻ không hợp lệ đầu tiên mà nó gặp phải.

If we change the styles for that f\[type=h2\] rule (http://jsfiddle.net/qJMWg/1/) ảnh hưởng đến mọi thứ - điều này phù hợp với ý tưởng cho rằng Chrome đang diễn giải cấu trúc XML này một cách không chính xác. Đối với công cụ CSS của Chrome (mặc dù những gì công cụ dành cho nhà phát triển cho chúng tôi biết), bằng cách nào đó, như sau:

<b> 
     <s> 
     <f type="h2">Title&lt;/f&gt; 
     &lt;f type="p"&gt;Paragraph&lt;/f&gt; 
     &lt;f type="speech"&gt;Dialgoue&lt;/f&gt; 
     &lt;f type="other" br="true"&gt;Other&lt;/f&gt; 
     &lt;f type="p"&gt;Paragraph&lt;/f&gt; 
     &lt;f type="p"&gt;Paragraph</f> 
     </s> 
    </b>