Question

第一个字母伪类适用于p元素，但不适用于锚点（链接）。为什么？如何使<a>元素

的第一个字母样式不同

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

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的{{1}}的样式，如下所示：

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：

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

css第一个字母的链接

4 个答案: