擬似クラス(:)と擬似要素(::)の違い
5168 ワード
擬似クラスと擬似要素はいずれもCSS 1とCSS 2の中の概念であり、CSS 1とCSS 2の中で擬似クラスの擬似要素の区別があいまいである.CSS 3はこの2つの概念に対して比較的はっきりした概念を作った.以下、css 2とcss 3の中でこの2つの概念の定義を見る.
CSS 2における擬似クラスの定義:
CSSダミークラスは、特定のセレクタに特殊な効果を追加するために使用されます.
定義だけでは何を言っているのか分からない.CSS 3の擬似クラスの定義:
The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.
A pseudo-class always consists of a “colon” (
Pseudo-classes are allowed in all sequences of simple selectors contained in a selector. Pseudo-classes are allowed anywhere in sequences of simple selectors, after the leading type selector or universal selector (possibly omitted). Pseudo-class names are case-insensitive. Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to the same element. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document.
翻訳すると、
擬似クラスの存在の意味は、DOMツリーに存在しない情報および従来のCSSセレクタによって取得できない情報をセレクタによって見つけるためである.
疑似クラスは、冒頭、後に疑似クラスの名前とカッコに含まれるオプションのパラメータで始まるコロンです.
任意の通常のセレクタは、任意の場所で偽クラスを使用できます.擬似クラス構文は大文字と小文字を区別しません.いくつかの擬似クラスの役割は反発し、他の擬似クラスは同じ要素で同時に使用することができます.また、ユーザがDOMを操作する際に生じるDOM構造の変化を満たすために、擬似クラスは動的であってもよい.
実は第1段の話はCSS 3の偽類のすべての定義を網羅して、この話の中でCSS 3の偽類の機能は2種類あることを指摘します:は、DOMツリーに存在しない情報を取得する.例えば は、従来のCSSセレクタでは取得できない情報を取得する.例えば、ダミークラス:targetは、文書(ページ)のURIのフラグのターゲット要素をマッチングする役割を果たす.
注意:targetの使用法とcss 2、css 3の中の偽のクラス、偽の要素はすべてどれらが参考にすることができます:CSSセレクタ
CSS 2における擬似要素の定義:
CSSダミー要素は、特定のセレクタに特殊な効果を設定するために使用されます.
疑似クラスの定義とはあまり違いません.本来CSS 2の疑似クラスと疑似要素の定義はまったく同じです.
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
翻訳すると
CSSは,文書ツリー以外の情報に基づいてフォーマットを可能にするために,擬似要素と擬似クラスの概念を導入した.
CSS 3における擬似要素の定義:
Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the::before and::after pseudo-elements give access to generated content).
A pseudo-element is made of two colons (: followed by the name of the pseudo-element.
This::notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification.
Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.
Note: A future version of this specification may allow multiple pseudo-elements per selector.
翻訳すると
擬似要素はDOMツリーにいくつかの抽象要素を作成し、これらの抽象要素はドキュメント言語に存在しない(htmlソースと理解できる).たとえば、documenインタフェースは、要素コンテンツの最初のワードまたは最初のローにアクセスするメカニズムを提供しません.擬似要素は、開発者がこれらの情報を抽出できるようにします.さらに、いくつかの擬似要素は、開発者にソースドキュメントに存在しないコンテンツ(例えば、一般的な:before,::after)を取得させることができる.
疑似要素は、2つのコロンで始まり、次に疑似要素の名前です.
2つのコロンを使用します::擬似クラスと擬似要素を区別するためです(CSS 2では区別されていません).もちろん、互換性を考慮すると、CSS 2に存在する疑似要素は依然として1つのコロン:の構文を使用することができるが、CSS 3に新たに追加された疑似要素は2つのコロン:::を使用しなければならない.
1つのセレクタは1つの擬似要素しか使用できず、擬似要素はセレクタ文の最後にある必要があります.
注意:今後、複数の擬似要素を同時に使用するメカニズムが追加されることは排除されません.
簡単に言えば、擬似要素はDOM要素を含まないが、コンテンツを含むことができる仮想コンテナを作成します.また、開発者は、擬似要素のスタイルをカスタマイズすることもできます.擬似クラスと擬似要素の特性とその違いをまとめます.擬似クラスは本質的に、より多くの情報を得るために、従来のCSSセレクタの不足を補うためである. 擬似要素は本質的にコンテンツのある仮想コンテナを作成する. CSS 3では擬似クラスと擬似要素の構文が異なり、擬似クラスの操作対象はドキュメントツリーに既存の要素であり、擬似要素はドキュメント数外の要素を作成する. は複数の擬似クラスを同時に使用することができるが、1つの擬似要素しか同時に使用できない. CSS 3において、擬似クラスは単一のコロンで表される.擬似要素は2つのコロンで表されます::表示;
IE 8以下のブラウザの中には、二重コロン(
Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.
翻訳すると
疑似要素を記述する新しいCSS 3方法は、例えばa::after{...}を使用して疑似クラスと区別する二重コロンであることに注意してください.これをCSSで見ることがあるかもしれません.しかし、CSS 3では、単一コロン偽要素の使用が許可されています.後方互換性のために、単一コロンという文法を一時的に使用することをお勧めします.
擬似クラス-pseudo classes
CSS 2における擬似クラスの定義:
CSSダミークラスは、特定のセレクタに特殊な効果を追加するために使用されます.
定義だけでは何を言っているのか分からない.CSS 3の擬似クラスの定義:
The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.
A pseudo-class always consists of a “colon” (
: ) followed by the name of the pseudo-class and optionally by a value between parentheses. Pseudo-classes are allowed in all sequences of simple selectors contained in a selector. Pseudo-classes are allowed anywhere in sequences of simple selectors, after the leading type selector or universal selector (possibly omitted). Pseudo-class names are case-insensitive. Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to the same element. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document.
翻訳すると、
擬似クラスの存在の意味は、DOMツリーに存在しない情報および従来のCSSセレクタによって取得できない情報をセレクタによって見つけるためである.
疑似クラスは、冒頭、後に疑似クラスの名前とカッコに含まれるオプションのパラメータで始まるコロンです.
任意の通常のセレクタは、任意の場所で偽クラスを使用できます.擬似クラス構文は大文字と小文字を区別しません.いくつかの擬似クラスの役割は反発し、他の擬似クラスは同じ要素で同時に使用することができます.また、ユーザがDOMを操作する際に生じるDOM構造の変化を満たすために、擬似クラスは動的であってもよい.
実は第1段の話はCSS 3の偽類のすべての定義を網羅して、この話の中でCSS 3の偽類の機能は2種類あることを指摘します:
注意:targetの使用法とcss 2、css 3の中の偽のクラス、偽の要素はすべてどれらが参考にすることができます:CSSセレクタ
擬似要素-Pseudo-elements
CSS 2における擬似要素の定義:
CSSダミー要素は、特定のセレクタに特殊な効果を設定するために使用されます.
疑似クラスの定義とはあまり違いません.本来CSS 2の疑似クラスと疑似要素の定義はまったく同じです.
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
翻訳すると
CSSは,文書ツリー以外の情報に基づいてフォーマットを可能にするために,擬似要素と擬似クラスの概念を導入した.
CSS 3における擬似要素の定義:
Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the::before and::after pseudo-elements give access to generated content).
A pseudo-element is made of two colons (: followed by the name of the pseudo-element.
This::notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification.
Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.
Note: A future version of this specification may allow multiple pseudo-elements per selector.
翻訳すると
擬似要素はDOMツリーにいくつかの抽象要素を作成し、これらの抽象要素はドキュメント言語に存在しない(htmlソースと理解できる).たとえば、documenインタフェースは、要素コンテンツの最初のワードまたは最初のローにアクセスするメカニズムを提供しません.擬似要素は、開発者がこれらの情報を抽出できるようにします.さらに、いくつかの擬似要素は、開発者にソースドキュメントに存在しないコンテンツ(例えば、一般的な:before,::after)を取得させることができる.
疑似要素は、2つのコロンで始まり、次に疑似要素の名前です.
2つのコロンを使用します::擬似クラスと擬似要素を区別するためです(CSS 2では区別されていません).もちろん、互換性を考慮すると、CSS 2に存在する疑似要素は依然として1つのコロン:の構文を使用することができるが、CSS 3に新たに追加された疑似要素は2つのコロン:::を使用しなければならない.
1つのセレクタは1つの擬似要素しか使用できず、擬似要素はセレクタ文の最後にある必要があります.
注意:今後、複数の擬似要素を同時に使用するメカニズムが追加されることは排除されません.
簡単に言えば、擬似要素はDOM要素を含まないが、コンテンツを含むことができる仮想コンテナを作成します.また、開発者は、擬似要素のスタイルをカスタマイズすることもできます.擬似クラスと擬似要素の特性とその違いをまとめます.
IE 8以下のブラウザの中には、二重コロン(
::)の表示方法に対応していないものもあるため、一部の擬似要素を除いて、残りの擬似要素は単一コロン(:)を使用してもよいし、二重コロン(::)を使用してもよい.w 3 c規格を引用すると、Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.
翻訳すると
疑似要素を記述する新しいCSS 3方法は、例えばa::after{...}を使用して疑似クラスと区別する二重コロンであることに注意してください.これをCSSで見ることがあるかもしれません.しかし、CSS 3では、単一コロン偽要素の使用が許可されています.後方互換性のために、単一コロンという文法を一時的に使用することをお勧めします.