cssとcss3の擬似クラスと擬似要素の違いのまとめ-CSSチュートリアル-php.cn

cssとcss3の擬似クラスと擬似要素の違いのまとめ

伊谢尔伦

リリース： 2017-06-09 15:47:28

オリジナル

1511 人が閲覧しました

CSS を学習する過程では、疑似クラスと疑似要素という 2 つの概念を特に混同しやすくなります。 w3c での両方の定義は次のとおりです: CSS 疑似クラスは、特定のセレクターに特殊効果を追加するために使用されます。 CSS 擬似要素は、特定のセレクターに特殊効果を追加するために使用されます。疑似クラスは当初、一部の要素の動的ステータス、通常はリンクのステータス (LVHA) を表すために使用されました。その後、CSS2 標準はその概念的範囲を拡張し、論理的には存在するがドキュメントツリー内で識別する必要のないすべての「ゴースト」カテゴリを含めるようになりました。疑似要素は要素のサブ要素を表しますが、このサブ要素は論理的には存在しますが、ドキュメントツリーには実際には存在しません。 CSS と CSS3 における疑似クラスと疑似要素の違いについて話しましょう。

まずはPHP中国語サイト関連の無料講座を学べます

1. 「CSS3入門から使いこなしチュートリアル」中 css3擬似クラスセレクター講座

2 . 「Dark Horse Programmer CSS ビデオチュートリアル」疑似クラスと疑似要素 関連ビデオチュートリアル

疑似クラスと疑似要素の違い

1.でCSS3 クラスと擬似要素の違いと注意点

CSS3の標準では、擬似クラスは単一のコロン「:」を使用し、擬似要素は二重コロン「::」を使用します(混乱を避けるため)。それは、疑似クラスであっても疑似要素であっても、どちらも単一のコロン「:」を使用するため、疑似要素との互換性を確保するために、両方の使用方法が可能です

ただし、IE の以前のバージョンでは、コロンが 2 つあります。 -コロンの互換性の問題があるため、過去にスタイルを作成した人は単に疑似クラスと疑似要素に単一のコロンを使用していたため、この混乱が続いていました。

CSS疑似クラスと疑似要素の違い

疑似クラスの効果は実際のクラスを追加することで実現できますが、疑似要素の効果は実際の要素を追加することで実現する必要があります。これが、一方が擬似クラスと呼ばれ、もう一方が擬似要素と呼ばれる理由です。疑似要素と疑似クラスが混同されやすいのは、両者の効果や記述方法が似ているためですが、実は両者を区別するためにCSS3では疑似クラスを1つで表現することが明確に規定されています。コロン、擬似要素は 2 つのコロンで表されます。

CSSの疑似クラスと疑似要素の説明とその違い

CSSの疑似クラス(Pseudoclasses)は、セレクターまたはセレクター関連のステータスを指定するために使用されます。それに。形式は selector:pseudoclass{property:value;} で、半角英語のコロン (:) を使用してセレクターと疑似クラスを区切ります。

CSS の提案の多くはブラウザーではサポートされていませんが、安全に使用できる接続用の CSS 疑似クラスが 4 つあります。リンクはアクセス接続に使用されます。 Visited は、すでに訪問された接続に使用されます。ホバーは、マウスカーソルを置く接続に使用されます。 active は、フォーカスを受け取った (たとえば、クリックされた) 接続で使用されます。

CSS の疑似要素の例と疑似クラスとの違い

CSS 仕様がさらに改良されるにつれて、より多くの CSS 疑似要素が追加されることはわかっていますが、日常の開発では、一般的にブラウザのサポートについてより楽観的なのは、その前後です。しかし、私たちが日常の開発で使用するのは、次のとおりです: {content: ”;} の後にフロートをクリアし、要素を追加します (IE8 ブラウザーでの単一コロンの使用に注意) しかし、コンテンツの可能な値は何ですか。 ?

一般的な CSS 属性の疑似要素と疑似要素の概要

疑似クラスは、最初はいくつかの要素の動的ステータス、通常は一般的に使用されるリンク (リンク、アクティブ、ホバー、訪問) に続き、CSS2 標準

は、論理的には存在するがドキュメントツリー内で識別されないすべての「ゴースト」カテゴリを含むように概念範囲を拡張しました

擬似要素は、特定の要素のサブ要素を表します。このサブ要素は論理的には存在しますが、通常使用する after や before などのドキュメントツリーには実際には存在しません。

6. CSS 疑似クラスと疑似要素について簡単に説明します

疑似クラス選択要素は、要素の ID ではなく、要素の現在の状態、または要素の現在の特性に基づいています。クラス、属性など。静的なロゴ。状態は動的に変化するため、要素が特定の状態に達すると、疑似クラススタイルが取得され、状態が変化するとこのスタイルが失われます。このことから、その機能はクラスの機能に似ていることがわかりますが、ドキュメントの外部での抽象化に基づいているため、疑似クラスと呼ばれます。