链接中的CSS第一个字母选择器

Question

我正在从这个名为的伪元素中获得头痛:first-letter.它似乎非常有用,但最终并没有按照我的预期运作.

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

FIDDLE在这里

如你所见,:first-letter什么都不做.我希望它覆盖正常的链接设置和:hover选择器.

什么可能出错？任何其他想法如何只用CSS实现这一点？

Answer 1

您可以将它放在CSS中,而不是将您的"»"放在HTML中

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;
}

这使用了很多黑客,所以除非你了解那里发生了什么,否则我不建议使用它.