在 FF 下从 javascript 设置普通类时，CSS 伪类将不起作用

Question

我的样式表中有p.first_p:first-letter，正如我所检查的，当first_p 类在HTML 中设置时效果很好。当我使用 javascript 查找元素然后设置它们的类时，问题就开始了。

在 Chrome 和 Opera 下运行良好（我需要检查 IE 8 和 9，以及 FF3）。

FF 5.01 更改了类，但伪类设置仍然不影响元素。

似乎 FF 需要在伪类开始工作之前“刷新”元素的 css 设置，所以我做了相当肮脏的解决方法 - 脚本用它的克隆替换受影响的节点。

有没有更好的方法来解决这个问题？让FF重新计算它所知道的关于节点的一切的方法？此外，对于 IE 7，这种解决方法还不够。

编辑：是的，伪元素不是伪类，我的错

Answer 1

这绝对是一个错误。一种可能的解决方法是更改​​元素的display 样式。不幸的是，在应用了之前的样式更改之后，这需要延迟完成：

element.className = 'first-class';
element.style.display = 'inline';
setTimeout(function(){
  element.style.display = '';
}, 0);

演示：http://jsfiddle.net/pvEDY/3/

Answer 2

你遇到了https://bugzilla.mozilla.org/show_bug.cgi?id=8253

Answer 3

可以不使用javascript吗？

我猜您将 first_p 应用于特定元素的第一段。 您可以改用 :first-child 选择器吗？

我不确定这是否可行，但您可以尝试以下方法，假设您想将其应用于具有“copy”类的 div 的子级

.copy p:first-child:first-letter{
  color: #abcdef; /* or whatever */
}

this definitely works 你不需要 javascript，除了蹩脚的旧 IE。

或者你可以试试这个：

.element p:first-letter{
  font-size: 20px;
}

.element p + p:first-letter{
  font-size: inherit;
}

这个 css 使任何前面没有另一个段落的段落都有一个样式化的第一个字母。这能解决你的问题吗？

等等，你希望它在 Firefox 中运行。试试这个：

.element p:first-of-type:first-letter{
  font-size: 20px;
}

它选择第一个匹配的元素。根据SitePoint's page for :first-of-type，Firefox、Opera、Chrome 和 Safari 支持 :first-of-type 伪元素