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

Question

:first-letter 伪元素选择器非常适合

元素，但不适用于链接。例如，这没有任何效果：

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

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

Answer 1

根据 W3 规范， :first-letter 伪元素仅适用于块元素，而 a 则不然。

奇怪的是，在 Chrome 14 和 Firefox 3.6.23 中，*:first-letter 导致第一个字母发生变化。小提琴：http://jsfiddle.net/8W7FF/3/

Answer 2

检查规范。截至目前，::first-letter 不支持 inline 元素：

在 CSS 中，::first-letter 伪元素适用于块状容器，例如 block、list-item、 table-cell、table-caption 和 inline-block 元素。
注意：此规范的未来版本可能允许此伪元素应用于更多显示类型。
https://www.w3.org/TR/selectors-3 /#application-in-css

因此，如果您尝试设置不是“块状容器”（例如内联元素）的 ::first-letter 样式，这是行不通的。这不仅适用于链接；也适用于链接。您还会发现，默认情况下，您也无法设置 span 的 ::first-letter 样式，如下所示：

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>