：li元素的第一个字母

Question

我正在尝试在导航菜单上使用：first-letter伪元素。

HTML，例如：

<nav>
    <ul>
        <li>Navigation</li>
        <li>Navigation</li>
        <li>Navigation</li>
        <li>Navigation</li>
    </ul>
</nav>

和CSS一样：

nav li:first-letter {font-size: 150%;}

我也试过

nav ul li:first-letter {font-size: 150%;}

没有帮助。

我可以看到它适用于<ul>标记上的第一个元素，如果我将其调整为：

nav ul:first-letter {font-size: 150%;}

但仍然无法得到我需要的东西; <li>的内联，其第一个字符比其他字符大。

Answer 1

由于您的li元素全部内联（假设您的display: inline样式未显示），:first-letter伪元素只会获取第一个字母。整个内联文本块。这就是ul:first-letter有效的原因，但li:first-letter没有。

尝试将列表项改为内联块，这样它们就可以继续在自己的框中包含文本，而这些框本身也是内联的。如有必要，将边距和填充清零。

jsFiddle demo

Answer 2

您的第一个CSS代码段工作正常，请查看this fiddle。你必须有另一个覆盖它的css规则。

Answer 3

似乎来自浏览器的创建的“阴影”标记只是插入另一个元素。

类似的东西：

<p><p:first-letter>H</p:first-letter>ello</p>

您是否尝试使用内联块和/或块元素:first-letter选择器？

尝试添加display:block，然后就可以了。