javascript - Firefox 中的多个 CSS 伪选择器不起作用

Question

具体来说:

p:first-child:first-letter {font-size:48px;}

适用于所有浏览器(甚至 IE8 大声喊叫)但不适用于 Firefox (v.10.02)

有人知道 CSS 或 javascript 变通方法吗？为了实现我想要的(第一段中的首字下沉)，我唯一能想到的就是用 span 标签动态包装第一个字符。但肯定有更好的方法吗？

Answer 1

你可以这样做:

p:first-letter {font-size:48px;}
p + p:first-letter {font-size:1rem}

使用新的 rem 单位，即 root em, for IE>8您必须手动输入根字体大小。

或者你可以像这样使用JQuery

   $('p:first-child').addClass('first-child');

并将你的CSS更改为

p.first-child:first-letter { font-size:48px}