:关于 li 元素的首字母答案

【问题标题】：:first-letter on li elements:关于 li 元素的首字母
【发布时间】：2012-03-04 08:45:33
【问题描述】：

我正在尝试在导航菜单上使用 :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> 的第一个字符大于其他字符的内联。

【问题讨论】：

【解决方案1】：

因为您的 li 元素都是内联流动的（假设您有一个未显示的 display: inline 样式），:first-letter 伪元素只会从整个内联文本块中提取第一个字母.这就是为什么ul:first-letter 有效，而li:first-letter 无效。

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

【讨论】：

【解决方案2】：

您的第一个 CSS sn-p 工作正常，请查看 this fiddle。您必须有另一个覆盖它的 css 规则。

【讨论】：

【解决方案3】：

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

类似：

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

您是否尝试使用带有 inline-block 和/或块元素的 :first-letter 选择器？

尝试添加display:block，然后应该可以工作。

【讨论】：

我认为他只是在说明伪元素的工作原理。如果是这样的话，这个答案完全没有抓住重点。
好吧，实际上插图是为了展示如果您使用伪选择器 :first-letter 是如何自动创建内联元素的。不知道为什么这完全没有抓住重点，因为这是提问者给定的问题 - 因为字体大小是相对于父元素而不是绝对的，因此每个继承级别的大小都会增加一倍。