1

奇妙な状況に遭遇したとき、私は CSS セレクターをいじっていました。

:first-child 疑似要素を使用する場合は、それが機能するように先頭にスペースを追加する必要があります。そうしないと機能しません。ただし、:first-letter 疑似要素の状況は逆で、先頭にスペースが追加されていない場合にのみ機能します。

これらは両方とも疑似要素であるため、かなり一貫性がありません。最初は IE10 だけの問題かと思いましたが、Chrome と Firefox で確認しましたが同じ結果でした。足りないものはありますか？この動作には理由がありますか?

問題を再現するコンパクトなサンプルを次に示します。

<!DOCTYPE html>
<html>
<head>
<style>
    * { color: red; }
    #article1 :first-child { color: deepskyblue; }
    article :last-child { color: darkmagenta; }
    #firstLetter:first-letter { color: darkslateblue; }
    #firstLine:first-line { color: darkslateblue; }
</style>
</head>
<body>
    <article id="article1">
        <div>E :first-child </div>
        <div>E :last-child </div>
    </article>                        
    <div id="firstLetter">:first-letter</div>
    <div id="firstLine">:first-line</div>
</body>
</html>
4

1 に答える 1

6

あなたの混乱は、疑似要素ではなく疑似クラス:first-childで:last-childあるという事実から来ています。それらはそれぞれ、その親の最初と最後の子を意味しますが、それらを接続する要素は、親ではなく子を表します。疑似クラスは、ID セレクターがその ID を持つ要素を記述したり、属性セレクターがその属性を持つ要素を記述したりするのと同じように、特定の要素の記述です。したがって、セレクターは、 がその親の最初の子であることを意味します — その親が何であれ — の最初の子ではありません。E:first-childE E

の最初の子であるため、セレクター#article1:first-childは一致するはずですが、 の最初の子であるとは一致しません。は、たまたま親が である最初の子であるため、 に一致します。#article1bodydiv #article1#article1 :first-childdiv#article1

一方、各要素の最初の文字と最初の行に:first-letterそれぞれ一致するため、機能します。これが疑似要素の意味です。他の要素のメンバーとして生成される (DOM では表されない) 仮想要素。:first-line

これは、スペースをどちらか一方と一緒に使用できる、または使用できないという意味ではないことに注意してください。疑似クラスまたは疑似要素セレクターで任意のコンビネーターを使用するか、単純なセレクターの別のチェーンにアタッチすることができます。コンビネータを使用する場合と使用しない場合では、意味が異なるだけです。そのため、異なる結果が表示されます。

疑似クラスと疑似要素の別の説明は、こちらにあります。

IE8 以前をサポートする必要がない場合は、二重コロンを使用して疑似要素を表し、疑似クラスと区別できるようにする必要があり::first-letterます。この表記法は、新しいSelectors モジュールで導入されました。::first-line:first-letter:first-line

于 2013-02-17T06:10:19.880 に答える