2

我目前正为这个名为:first-letter. 它似乎很有帮助，但最终没有按我预期的方式工作。

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

小提琴在这里

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

可能出了什么问题？任何其他想法如何仅使用 CSS来实现这一点？

4

1 回答 1

5

与其将“»”放在 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;
}

这使用了很多技巧，因此除非您了解那里发生的事情，否则我不建议您使用它。

于 2012-11-30T12:02:50.230 回答