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，其他为灰色）。 在chrome中，一切都是绿色的。

如何在Chrome中获取Firefox结果？

Answer 1

更改attr名称将对您有所帮助，而且我不知道为什么

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

您的HTML无效。 如果通过验证器运行它，则会发出错误，因为它不喜欢命名的嵌入式XML标记。

根据HTML / XML特别工作组报告 ：

当HTML5解析器遇到不熟悉的标记时，它会假定这样的标记是生成定义良好的HTML5的错误尝试。 因此，它应用了纠错策略，这些策略导致DOM表示与XML解析器可能产生的DOM完全不同。 特别地，开放元件可能过早地结束并且可以打开附加元件。

实际结果是，HTML5文档中的“裸”XML岛将无法可靠地生成任何类似于人们对随后检查XML岛所期望的DOM。

所以Chrome完全有权在这里搞砸，因为从技术上讲，你首先要做到这一点。 值得注意的是（在我的Chrome浏览器中） 所有元素都是绿色的 （ http://jsfiddle.net/qJMWg/ ） - 这表明由于某些原因它们所有的东西都嵌套在一个大的<f type="h2">元素。 这是值得注意的，因为HTML确实包含<b>和<s>标记，因此<f>是它遇到的第一个无效标记。

如果我们更改f\\[type=h2\\]规则 （ http://jsfiddle.net/qJMWg/1/ ） 的样式，它会影响所有内容 - 这与Chrome不正确地解释此XML结构的想法是一致的。 对于Chrome的CSS引擎（尽管开发人员工具告诉我们），这看起来像这样：

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

Answer 3

由于某些未知原因，Chrome对HTML标记非常严格，因此CSS规则在上述浏览器中无法正常工作。

但是有一个建议，为什么不改变XML的样式呢？