2

私は現在、と呼ばれるこのくそったれの疑似要素から頭痛を感じてい:first-letterます。それはとても役立つようですが、最終的には私が期待したようには機能しません。

jsfiddleの例、私が試した方法、およびどのように表示されるかを次に示します。

FIDDLEはこちら

ご覧のとおり、: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 に答える