:first-letter
伪元素选择器对于 <p>
元素来说非常有效,但对于链接则无效。例如,下面的代码没有任何效果:
a:first-letter
{
font-size:200%;
text-transform:uppercase;
color:#8A2BE2;
}
为什么?我如何使
<a>
元素的首字母样式不同?:first-letter
伪元素选择器对于 <p>
元素来说非常有效,但对于链接则无效。例如,下面的代码没有任何效果:
a:first-letter
{
font-size:200%;
text-transform:uppercase;
color:#8A2BE2;
}
<a>
元素的首字母样式不同?:first-letter
伪元素仅适用于块级元素,而a
不是块级元素。
奇怪的是,在Chrome 14和Firefox 3.6.23中,*:first-letter
导致第一个字母转换。示例:http://jsfiddle.net/8W7FF/3/
请查看规范。目前,::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>
<a>
的:first-letter
,也是<body>
的:first-letter
。尽管如此,+1,你的答案看起来是正确的。 - duribody
标签,而 jsFiddle 会自动放置该标签。 - Jon Newmuis<body>
的jsfiddle;在HTML中,<body>
标签是可选的,可以有开放和关闭标签。每个HTML文档都有其自己的body
,无论您是否将其明确添加到标记中。 - duribody
。选择器body *
匹配“body
内的任何元素”==a
元素。由于:first-letter
不适用于行内元素,所以字母不会大写。尝试使用body:first-letter
,你会看到字母被大写,因为它是body
的第一个字母,即使它是另一个元素(在这种情况下是a
)的第一个字母。 - duri