Css Pseudo-class：第一个字母

Question

可以在a代码中使用吗？

a.x:first-letter
{
   color:red;
}

我的名字是<a class=x>Lionel</a>

我似乎无法使其发挥作用。

Answer 1

根据css2.1 :first-letter仅适用于block container elements。

Answer 2

是的，这应该可以正常工作。

你能提供一个不起作用的JSFiddle示例吗？

当然应该有用 - 请参阅here for a test page which demonstrates it in action和here for a browser compatibility chart（它说它应该可以在任何浏览器中使用）。

[编辑]

正如@SilentGhost所说，它只适用于块级元素，<p>是<a>而<a>不是。

您可以使用display:block;样式将display:inline-block;等内联元素作为块元素。但是这会弄乱您的页面布局。

幸运的是，有一个中途的选项：a.x { display:block; } ，它应该使你的元素被视为一个块元素，而不会破坏你的页面布局。尝试将其添加到样式表中，如下所示：

:first-letter

您的{{1}}样式现在应该有效。