javascript - 在 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，这种解决方法还不够。

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

score 1 · Accepted Answer

1

于 2011-08-30T16:29:05.020 回答

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

可以不使用javascript吗？

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

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

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

这绝对有效，你不需要 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;
}

3 回答 3