html - CSS Rel 在 Google Chrome 中不起作用？

Question

我尝试为 rel 属性添加一些特定的 css，并在 chrome 中对其进行演示。例子：

pre[rel="js"]:before {
   content:"JavaScript";
}

pre[rel="css"]:before {
   content:"CSS";
}

然后当然添加 HTML 到它。在 chrome 中，这一切都证明之前有“JavaScript”，忽略了 CSS 的其余部分，尽管在 Firefox 上它工作得很好。

我在 上执行此操作的页面。

Answer 1

嗯。这真的很奇怪。绝对是 Chrome 错误。

我可以在 Chrome 16.0.912.63 中可靠地重现您的问题

添加

pre[rel] {
  font-size:1em;
}

样式表清除了问题，但该子句似乎需要包含至少一种有效样式。

我没有理由想到为什么这应该是预期的行为。

请注意，如果您使用类而不是 rel 属性的无效使用，则不会发生问题。例如使用

<pre class="js code">

和

pre.js:before {
    content:"JavaScript";
    padding-right:434px;
}

等等