css_html/css_WEB-ITnose の疑似クラスと疑似要素

疑似クラス

疑似クラスはクラスに似ていますが、クラスに付加されたタグがありません。疑似クラスは、UI 疑似クラスと構造化疑似クラスに分類されます。

UI疑似クラス

• :link(未訪問のリンクにスタイルを追加)

• :visted(訪問済みのリンクにスタイルを追加)

• :hover (要素にスタイルを追加)マウスはホバリングしています）

：アクティブ（アクティブ化された要素にスタイルを追加）

• ：フォーカス（選択した要素にスタイルを追加）

:first-child(最初の子要素にスタイルを追加)

• :last-child(最後の子要素にスタイルを追加)

疑似要素

疑似要素は、文書。

主に以下の種類があります
• :first-letter (先頭文字にスタイルを追加)

:first-line (先頭行にスタイルを追加)

:before(特定のコンテンツを特定の要素の前に挿入します)

:after(特定のコンテンツを特定の要素の後に挿入します)

• 見て、フローティング要素をクリアする CSS は誰でも思いつくはずです。はい、それだけです。
• ?

• 1

2

• 3

4

5

6

7 1

.clearfix:after { コンテンツ : "." 表示 :ブロック ; 高さ : 0 ; 透明度 : 両方 ;

をよく考えてください彼らの定義。 疑似クラスの実装は、このタグに仮想クラスを追加するようなものです。 例: ?

2

3

4

5

a:hover{

フォントサイズ: 20px;

カラー: 赤

} Hello,World 1 .hover{

疑似クラスを使用しない場合は、これを行う必要があります ?

2 3 4 5

font-size: 20px

color: red

} & lt;a href= "#" class= "hover" > ;Hello,World疑似要素は、新しいタグを追加するようなものです。 3

この比較では、「疑似クラス」はその名のとおりです。

? 1 2

4

5

p:first-letter{

フォントサイズ: 20px;

カラー: 赤

}

Hello,World

font-size : 20px ;

疑似要素なしで同じ効果を実現するには、次のようにする必要があります ? 1

2 3 4 5 .first-letter{

color : red

}

Hello 、世界

それでは、区別する方法の概要を以下に示します: 実際には、同じ効果を得るにはクラスまたは要素タグを追加する必要があります。

ヒント:

1. 疑似クラスと疑似要素を区別するために、CSS3 は疑似クラスを表すために単一のコロンを使用し、疑似要素を表すために二重コロンを使用します。ただし、互換性を考慮して、現在は基本的にコロン 1 つで表現します。

2. 検索エンジンは疑似要素に関する情報を検索しません。したがって、検索エンジンに疑似要素を介してインデックスを作成させたい重要なコンテンツを追加しないでください

参考:

『CSS デザインガイド』

CSS プロパティの詳細説明 - 疑似クラスの違いおよび疑似要素

http://www.jb51.net/css/67317.html