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黄色和其他灰色).在chrome中,一切都是绿色的.

如何在Chrome中获取Firefox结果？

Answer 1

由于某种未知的原因，Chrome 对 HTML 标签相当严格，因此 CSS 规则在该浏览器中无法正常工作。

不过有一个建议，为什么不设置 XML 的样式呢？