Chrome和CSS属性选择器

问题描述

我有以下HTML代码，我想使用CSS格式化无法更改的数据格式(来自xml).

I have the following HTML code, where I would like to format with css a data format (coming from xml) which can't be changed.

我必须给具有不同属性值的元素赋予不同的样式.我想使用CSS属性选择器.

I have to give different styles to elements with different attribute value. I thought to use the CSS attribute selector.

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中，一切都是绿色.

In Firefox the page is rendered as I expect (h2 in green, p in blue, speech in yelllow and other in gray). In chrome everything is green.

如何在Chrome中获取Firefox结果?

How can I obtain the Firefox result in Chrome?

推荐答案

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

For some unknown reason, Chrome is rather strict on HTML tags thus the CSS rule won't work well in the said browser.

一个建议，为什么不设置XML样式代替?

A suggestion though, why don't you style the XML instead?

这篇关于Chrome和CSS属性选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！