使用CSS获取:hover元素的:first-letter

Question

在“悬停模式”下，是否可以获取元素的第一个字母？它应该是这个样子 - 我认为 - 但在Chrome 10中它不起作用：

p:hover:first-letter

或者

p:first-letter:hover

从技术上讲（个人认为），它们并不相同。第一个仅获取悬停元素的第一个字母。如果第一个字母在悬停状态，则第二个获取整个元素。我需要第一个。

如您所见http://css4.hotblocks.nl，如果您“启用”CSS块，则两者都无法正常工作。

当整个元素处于:hover模式时，我只想将元素的第一个字母颜色设置为红色。这是否可能不需要其他HTML标签？谢谢。

-- 编辑 我已经改进了我的在线示例。CSS现在分为单独的<style>块。更容易尝试打开和关闭。

目前的结论是：在Firefox 3.6/4中，a:first-letter:hover无效（好），而a:hover:first-letter可以正常工作（好！）。在Chrome 10中，a:first-letter:hover无效（好），而a:first-letter:hover会破坏之前的CSS语句。（在我的示例中，它不会破坏任何内容，因为它在一个单独的<style>块中。）这又让我们想起：谷歌Chrome再一次落后于Firefox =( --编辑

- Rudie

---

你的第二个代码片段是无效的。像 :first-letter 这样的伪元素只能出现在选择器的末尾。引用 CSS 规范中的一句话："每个选择器中只能出现一个伪元素，如果存在，则必须出现在代表选择器主体的简单选择器序列之后。" - Šime Vidas

那么根据规格，这是不可能的吗？:hover:first-letter 是无效的吗？ - Rudie

不，那没问题：element:hover:first-letter将:first-letter放在选择器的末尾。 - David Thomas

但是，“每个选择器只能出现一个伪元素”……:hover和:first-letter都是伪选择器，对吧？两者在Google Chrome中都无法工作。这是Webkit CSS的bug吗？（我找到了一个Webkit CSS的bug，哇呜！） - Rudie

同时，input:required:invalid 必须是一个有效的选择器，那么关于“每个元素只能有一个伪类”的说法是什么意思呢？ - Rudie

@Rudie：:hover，:required和:invalid是伪类而非伪元素。对于伪类没有应用到伪元素的条件。此外，规范说明伪元素的限制是暂定的，未来可能会放宽。 - Chuck

Answer 1

我已经查看了你的示例，不得不说它在 Firefox 3.6.13 上可以工作。

p:hover:first-letter {
    color: blue
}

你需要做的只是改变第一个字母的颜色。因为悬停时的颜色与文本颜色相同，所以你没有注意到任何视觉上的变化。

- Wojciech Bednarski

---

啊...在Firefox(4 beta 7)中它确实有效。但在Chrome 10中不行。在Chrome 10中甚至会破坏之前有效的:hover语句。这很奇怪。你看不到红色因为我也将红色添加到了简单的:hover中。我这样做是因为另一个本来就不起作用 =）谢谢你的尝试。不过我应该自己检查Firefox。 - Rudie

似乎对于Chrome 8.0.552.224（Win XP）也是如此。很奇怪。 - David Thomas

哇，这在Chrome 21中仍然不起作用。更奇怪的是：如果存在此样式规则，则会破坏Chrome中的整个悬停效果/样式！http://css4.hotblocks.nl/ - Rudie

Answer 2

:first-line和:first-letter伪元素都被规范定义为仅适用于块级元素。默认情况下，a元素是行内元素，因此除非将其更改为块级元素，否则:first-letter不适用于它。我认为Chrome在这里实际上是正确的，尽管这很不方便，而且我不知道W3C为什么没有想到行内元素也可以有首字母。

作为一个不完美的解决方法，您可以添加a {display: inline-block}或类似内容以获得样式。

- Chuck

---

在我的例子中，:first-letter应用于p：p:first-letter:hover { color: #f00; }和p:hover:first-letter { color: #f00; } - 我会在我的问题中进行更改。我猜这是一个Webkit的bug。 - Rudie