5

我有以下 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 中获取 Firefox 结果？

4

3 回答 3

2

更改 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>
于 2013-06-13T15:29:09.773 回答
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>and<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>
于 2013-06-13T15:29:12.493 回答
0

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

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

于 2013-06-13T15:16:54.407 回答