3

私は次のcss/htmlを持っています

<!DOCTYPE html>
<html>
<head>
    <style>
        a[href$=".pdf"]:after{
            content: "[pdf]";

        }
    </style>
</head>
<body>
<p>This is an example <a href="helloworld.pdf">Text with a pdf link</a></p>
<p>This is an example <a href="helloworld.png">Non PDF link</a></p>
</body>
</html>

これをIE8で開くと、期待どおりに機能します。PDFリンクは後にテキストが追加されますが、PNGは追加されません。ただし、 Chrome 23.0.1271.97で開くと、両方のリンクの最後に[pdf]が追加されます。さらに奇妙なことに、PDF以外のリンクをクリックすると、最後の[pdf]はクリックすると消えますが、PDFリンクをクリックしても消えません。

Chromeの結果がどのようになるかをここで確認してください

私がする時

a[href$=".pdf"]{
    color: red;
}

Chromeでも、PDFリンクは赤ですが、非PDFリンクは赤ではありません。

：afterとcontentを使用するときにChromeが属性セレクターを尊重しないように見えるのはなぜですか？

4

2 に答える 2

5

:after ルールだけをいじると、同じ問題が発生します。

a[href$=".pdf"]:after{
    content: "[pdf]";
}

ただし、:after なしでルールを追加すると、[pdf] が一番下に表示されなくなります。確かに奇妙です。

a[href$=".pdf"]:after{
    content: "[pdf]";
}

a[href$=".pdf"]{
    color: red;
}

これはクロムのバグのようです。:before/:after は、項目が属性セレクターで既にスタイル設定されていない限り、属性セレクターでは機能しません。ログに記録されたバグは次のとおりです。

于 2013-01-14T19:51:33.637 に答える
1

間違いなくバグのようです。ただし、回避策の1つは、ベースセレクターを使用して何かを設定してから、アフターを設定することです。たとえば、これは機能します：

a[href$=".pdf"] {
  font-size: inherit;
}
a[href$=".pdf"]:after {
  content: "[pdf]";
}
于 2013-01-14T19:57:44.497 に答える