：首字母选择器不适用于链接

Question

:first-letter伪元素选择器对<p>元素非常有效，但对链接无效。例如，这无效：

a:first-letter
{
    font-size:200%;
    text-transform:uppercase;
    color:#8A2BE2;
}

为什么？如何使<a>元素的首字母样式不同

Answer 1

[http://jsfiddle.net/raynesax/8W7FF/8/如何？

Answer 2

根据W3 spec，:first-letter伪元素仅适用于块元素，而a无效。

奇怪的是，*:first-letter使第一个字母转换，在Chrome 14和Firefox 3.6.23上。小提琴：http://jsfiddle.net/8W7FF/3/

Answer 3

如果使用JavaScript，可能值得一看：http://letteringjs.com（应该与跨浏览器完全兼容）

Answer 4

每the spec，“ ::first-letter伪元素仅适用于块容器。”因此，如果您尝试为不是“块容器”的东西设置::first-letter样式，例如内联元素，它将不起作用。这不仅适用于链接。您还会发现，默认情况下，您也无法设置::first-letter的span样式，如下所示：

div::first-letter, span::first-letter, a::first-letter {
    font-size:200%;
    text-transform:uppercase;
    color:#8A2BE2;
}

<div>I'm a div</div>
<span>I'm a span</span>
<a href="https://google.com">I'm an anchor</a>

对此的可能解决方法是，例如通过将其设置为display: block或display: inline-block，将其变成一个块容器。下面是一个示例，前者用于span，后者用于a：

div::first-letter, span::first-letter, a::first-letter {
    font-size:200%;
    text-transform:uppercase;
    color:#8A2BE2;
}
span {
    display: block;
}
a {
    display: inline-block;
}

<div>I'm a div</div>
<span>I'm a span</span>
<a href="https://google.com">I'm an anchor</a>