:first-letter 选择器不适用于链接答案

【问题标题】：:first-letter selector doesn't work for link:first-letter 选择器不适用于链接
【发布时间】：2011-11-02 16:51:20
【问题描述】：

:first-letter 伪元素选择器非常适合<p> 元素，但不适用于链接。例如，这没有效果：

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

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

【问题讨论】：

标签： css pseudo-element

【解决方案1】：

根据W3 spec，:first-letter 伪元素仅适用于块元素，a 则不行。

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

【讨论】：

您的 jsfiddle 演示“有效”，因为第一个 O 字母不仅是 <a> 的 :first-letter，而且也是 <body> 的 :first-letter。不过，+1，您的答案看起来是正确的。
我想这是因为 * 将包含 body 标签，jsFiddle 会自动将其放在那里。
@JonathanNewmuis 更准确地说，在文档中包含<body> 的内容不必是jsfiddle；在 HTML 中，<body> 具有可选的开始和结束标记。每个 HTML 文档都有其body，无论您是否明确将其添加到标记中。
@duri 对。对不起，如果这可能是模棱两可的。相反，我想说的是 jsFiddle 服务于具有 body 标签的内容，而不是 body 标签必须明确标记为 jsFiddle 已经完成。
@RobW 因为body，您刚刚证明了它确实是。选择器 body * 匹配“body 内的任何元素”== a 元素。由于:first-letter 不适用于内联元素，因此字母不会大写。尝试使用body:first-letter，您会看到该字母被大写，因为它是body 的第一个字母，即使它是另一个元素的第一个字母（在本例中为a）。

【解决方案2】：

检查specification。截至目前，::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 的样式，则它将不起作用。这不仅适用于链接；您还会发现，默认情况下，您也无法设置::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>

【讨论】：

您也可以将 ::first-letter 应用于锚包装元素