Селектор атрибутов Chrome и CSS

Question

У меня есть следующий HTML-код, где я хотел бы форматировать css формат данных (исходящий из xml), который нельзя изменить.

Я должен дать разные стили элементам с различным значением атрибута. Я думал использовать селектор атрибутов 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> 

В Firefox страница отображается, как я ожидал (h2 в зеленый цвет, p в синем, speech в Yelllow и другие серым цветом). В хроме все зеленое.

Как я могу получить результат Firefox в Chrome?

Answer 1

По какой-то неизвестной причине Chrome довольно строгий по HTML-тегам, поэтому правило CSS не будет работать в указанном браузере.

Предложение, однако, почему бы вам не сделать style the XML?

Answer 2

Изменение имени атр поможет, Andi понятия не имею, почему

 <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 не является действительным. Если вы запускаете его через валидатор, он выплевывает ошибки, потому что ему не нравятся именованные встроенные теги XML.

Согласно HTML/XML Task Force Report:

Когда анализатор HTML5 встречает незнакомую разметку, она предполагает, что такая разметка ошибочной попытки сформировать четкую HTML5. Следовательно, он применяет стратегии исправления ошибок, которые приводят к представлению DOM, которое может радикально отличаться от DOM, которое производил бы анализатор XML. В частности, открытые элементы могут закончиться преждевременно, и могут быть открыты дополнительные элементы.

Практический результат заключается в том, что «обнаженный» XML-остров в документе HTML5 не будет надежно создавать что-либо, что напоминает DOM, который можно было бы ожидать от случайной проверки XML-острова.

Таким образом, Chrome имеет право вносить свои права здесь, потому что технически вы сделали это в первую очередь. Следует отметить, что (в моем браузере Chrome) all the elements are green (http://jsfiddle.net/qJMWg/) - что предполагает, что по какой-то причине все они вложены в большой элемент <f type="h2">. Это примечательно, потому что HTML-код содержит тег <b> и <s>, поэтому <f> является первым недопустимым, с которым он сталкивается.

If we change the styles for that f\[type=h2\] rule (http://jsfiddle.net/qJMWg/1/) это влияет на все, что согласуется с идеей, что каким-то образом Chrome неправильно интерпретирует эту структуру XML. Для механизма CSS Chrome (несмотря на то, что говорят нам разработчики) это выглядит примерно так:

<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>