链接中的 CSS 首字母选择器

Question

我现在正被这个叫做 :first-letter 的该死的伪元素弄得头疼。它看起来很有帮助，但最终并没有像我预期的那样工作。

这是一个关于 jsfiddle 的例子，我是如何尝试的以及它应该是什么样子:

FIDDLE 是 here

如您所见，:first-letter 什么都不做。我预计它会覆盖正常的链接设置以及 :hover 选择器。

可能出了什么问题？还有其他想法如何仅使用 CSS 实现吗？

Answer 1

与其将“»”放在 HTML 中，不如将其放在 CSS 中

http://jsfiddle.net/4DnKu/4/

a.one:before {
    content: "»";
    color:#0F0;
    padding:0 5px 0 0;
}

恕我直言，它不应该以任何一种方式出现在 HTML 中，因为它实际上只是装饰。

所有主流浏览器都支持伪元素，只有 IE<8 会出现问题。在那里你可以使用 CSS 表达式作为解决方法(小心处理!):

a.one {
    *zoom: expression( (new Function('elem', '\
        if(elem.before)\
            return;\
        elem.innerHTML = "<span class=ie7-before>»</span>" + elem.innerHTML;\
        elem.before = true;\
        elem.style.zoom = "1";\
    '))(this) );
}

a.one > .ie7-before,
a.one:before {
    content: "»";
    color:#0F0;
    padding:0 5px 0 0;
}

这使用了很多 hack，所以我不建议使用它，除非你了解那里发生了什么。