21

MDN から:

この::表記法は、疑似クラスと疑似要素を区別するために CSS 3 で導入されました。ブラウザーは:、CSS 2 で導入された表記法も受け入れます。

この表記:が CSS3 ブラウザーで常に受け入れられる場合、古いブラウザーでも新しいブラウザーでも動作するため、それを使用する必要がありますか?

それとも、表記が常に受け入れられるとは限らないため、:古いブラウザーと::新しいブラウザーの両方を使用する必要がありますか?:

注：私の質問は重複していないと思います疑似要素に単一または二重のコロン表記を使用する必要があります 他の質問では、すべての疑似要素のシングル表記とダブル表記について尋ねているためです。私の質問は、CSS2 で定義された擬似要素についてのみであり、CSS3 で定義された新しい要素についてではありません::。

4

3 に答える 3

22

価値のあることとして、セレクター 4 は、今後、 CSS1 および CSS2 疑似要素を含むすべての疑似要素に二重コロンを使用するように明示的に1人の作成者に指示します(私の強調):

CSS レベル 1 と CSS レベル 2 は、疑似要素と疑似クラスを混同し、単一コロンの構文を共有しているため、ユーザー エージェントは、レベル 1 と 2 の疑似要素 ( ::before、::after、::first-line、と::first-letter）。この互換表記は、他の疑似要素では使用できません。ただし、この構文は非推奨であるため、作成者はこれらの疑似要素にレベル 3+ のダブルコロン構文を使用する必要があります。

これは、単一コロン構文の現在の適切な使用法は、レガシー ブラウザーのサポートが絶対に必要な場合のみであることを意味します。ここで問題となるのは IE8 以前のブラウザーのみです。そうでない場合は、二重コロンのみを受け入れる新しい疑似要素との一貫性を保つために、二重コロン構文を使用する必要があります。さらに、たとえば、 orなど、とにかくIE8でサポートされていないプロパティをおよび疑似要素に適用する場合、単一コロン構文を使用するのはまったく無意味です。border-radiusbox-shadow::before::after

Selectors 3 は、シングルコロンの構文は新しい疑似要素には適用されないという声明で、少なくともこれを暗示していると信じたいと思いますが、この種のことを白黒で述べても、誰も傷つけることはありません。今後の標準がまさにそれを行うことを知っておくとよいでしょう。

:before, :after { ... } ::before, ::after { ... }また、古い構文をサポートせずに新しい構文をサポートするブラウザは存在しないため、同じスタイルシートに両方の表記法で重複するルールを記述する理由はまったくありません (例: )。

1 私は、この質問がされた時点ではおそらくまだこれを述べていないことを十分承知しており、2013 年 5 月の WDは確かに述べていませんでした。

于 2015-02-15T15:53:31.493 に答える
4

以前このコメントで述べたように - http://css-tricks.com/html5-progress-element/#comment-533395

簡単な答え– シングルコロン表記を使用する:

長い答え– と の間、または:beforeとの間に実際の違いはありません。ただし、古いブラウザは単一のコロン表記を使用しているため、使用する方が常に安全です。W3Cによって定義された疑似要素に関するこの仕様を読んでください。::before:after::after:

この :: 表記は、疑似クラスと疑似要素を区別するために現在のドキュメントで導入されています。既存のスタイル シートとの互換性のために、ユーザー エージェントは、CSS レベル 1 および 2 で導入された疑似要素 (つまり、:first-line、:first-letter、:before、:after) の以前の 1 つのコロン表記も受け入れる必要があります。この互換性は、CSS レベル 3 で導入された新しい疑似要素では許可されていません。

于 2013-09-23T16:24:07.227 に答える