Question

在“悬停模式”下是否可以获取元素的第一个字母？这就是它的外观 - 我认为 - 但它不适用于Chrome 10：

p:hover:first-letter

或

p:first-letter:hover

技术上（imho）他们不一样。第一个是悬停元素的第一个字母。如果第一个字母悬停，则第二个采用整个元素。我需要第一个。

正如您在http://css4.hotblocks.nl上看到的那样，如果“启用”CSS块，则两者都不起作用。

当整个元素处于：悬停模式时，我只希望元素的第一个字母变成红色。是否可以没有其他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 =（ - 编辑

Answer 1

我已经检查了你的例子，我必须说它有效，在Fx 3.6.13上

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

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

Answer 2

:first-line和:first-letter伪元素均为defined in the spec，仅适用于块。默认情况下，a元素是内联的，因此除非您将其更改为块元素，否则:first-letter不适用于它。我认为Chrome实际上是正常的，虽然它不方便，我不知道为什么W3C没有出现内联元素也可以有第一个字母。

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

获取：第一个字母：带有CSS的悬停元素

2 个答案: