logo标签列表

:first-letter选择器对于链接无效。

csspseudo-element
7

:first-letter 伪元素选择器对于 <p> 元素来说非常有效，但对于链接则无效。例如，下面的代码没有任何效果：

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

为什么？我如何使<a>元素的首字母样式不同？
2个回答
5
根据W3规范，:first-letter伪元素仅适用于块级元素，而a不是块级元素。

奇怪的是，在Chrome 14和Firefox 3.6.23中，*:first-letter导致第一个字母转换。示例：http://jsfiddle.net/8W7FF/3/

2
你的 jsfiddle 演示“有效”，因为第一个 O 字母不仅是 <a> 的 :first-letter，也是 <body> 的 :first-letter。尽管如此，+1，你的答案看起来是正确的。 - duri
2
我想这是因为 * 会包括 body 标签，而 jsFiddle 会自动放置该标签。 - Jon Newmuis
1
@JonathanNewmuis 为了更加精确，它不需要在文档中包含<body>的jsfiddle；在HTML中，<body>标签是可选的，可以有开放和关闭标签。每个HTML文档都有其自己的body，无论您是否将其明确添加到标记中。 - duri
@duri 对的。如果我的话有歧义，我很抱歉。我想说的是 jsFiddle 提供具有 body 标签的内容，而不是必须像 jsFiddle 一样明确标记 body 标签。 - Jon Newmuis
1
@RobW，你刚刚证明了这确实是因为 body。选择器 body * 匹配“body内的任何元素”== a 元素。由于 :first-letter 不适用于行内元素，所以字母不会大写。尝试使用 body:first-letter，你会看到字母被大写，因为它是 body 的第一个字母，即使它是另一个元素（在这种情况下是 a）的第一个字母。 - duri
为什么不将“a”标签的display属性更改为block呢？ - Rajat Saxena
4

请查看规范。目前，::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 应用于锚点包装元素。 - nazar kuliyev
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接