CSS 疑似クラスと疑似要素についての簡単な説明_html/css

CSS 疑似クラスと疑似要素についての簡単な説明_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:51:43

オリジナル

1109 人が閲覧しました

この記事では、CSS の疑似クラスと疑似要素について説明します。参考のためにここで紹介します。

擬似クラス

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

擬似クラスセレクター: CSS で定義されているセレクターに気軽に名前を付けることはできません

:link

擬似クラスは未訪問のリンクに適用され、:visited と相互排他的です。

:hover

疑似クラスは、マウスポインターが上にある要素に適用されます。

:active

疑似クラスは、クリックされたリンク、押されたボタンなどのアクティブ化された要素に適用されます。

:visited

疑似クラスは訪問済みのリンクに適用され、:link と相互に排他的です。

:focus

疑似クラスは、キーボード入力フォーカスを持つ要素に適用されます。

:first-child

疑似クラスは、要素がページに最初に表示されるときに適用されます。

:lang

疑似クラスは、指定された lang の要素に適用されます。

:root() セレクター

要素 E が配置されているドキュメントのルート要素と一致します。 HTML ドキュメントでは、ルート要素は常にです。 ":root" セレクターは、要素

:not() セレクター

と同等であり、jQuery の :not セレクターとまったく同じで、特定の要素を除くすべての要素を選択できます。。

:empty() セレクター

は空を意味します。コンテンツのない要素を選択するために使用されます。ここでの「コンテンツなし」は、スペースも含めてコンテンツがまったくないことを意味します。

:target() selector

ページ上のターゲット要素のスタイルを指定します (要素の ID はページ内のハイパーリンクとして使用されます)。このスタイルは、ユーザーがページ内のハイパーリンクをクリックした場合にのみ発生します。 Jumps ターゲット要素に到達した後に機能します

:nth-child()

要素の 1 つ以上の特定の子要素を選択します。

:nth-last-child()

親要素の最後の子要素から数えて特定の要素を選択します。

疑似要素

特殊な状態の要素を対象とする疑似クラスとは異なり、疑似要素は要素内の特定のコンテンツに対して動作します。そのため、そのダイナミクスは疑似クラスよりも 1 つ深いレベルです。疑似クラスよりもはるかに低い。実際、疑似要素を設計する目的は、要素内容の最初の文字 (文字) と最初の行を選択し、特定の内容の前後を選択することですが、これは通常のセレクターでは実行できないことです。制御する内容は実際には要素と同じですが、要素に基づいて抽象化されただけであり、文書内には存在しないため、疑似要素と呼ばれます。

疑似要素セレクター: 実際の要素に使用されるセレクターではなく、CSS で定義された疑似要素に使用されるセレクターです。

あなたは以前に CSS の疑似要素を見てきました:first-line、:first-letter、:before、:after;
そして CSS3 では、疑似要素に特定の調整を加え、以下に基づいて追加しました。以前のものに「:」が追加され、「::first-letter,::first-line,::before,::after」になります。さらに、「::selection」と 2 つの「」も追加されました。 ::" と ":" は、CSS3 で主に疑似クラスと疑似要素を区別するために使用されます。今のところ、どちらの方法でも受け入れられます。つまり、どちらの記述方法を使用しても効果は同じですが、記述形式は次のとおりです。それぞれ異なります。

:first-letter

疑似要素のスタイルは、要素のテキストの最初の文字に適用されます。

:first-line

疑似要素のスタイルは、要素のテキストの最初の行に適用されます。

:before

要素コンテンツの前に新しいコンテンツを追加します。

:after

要素コンテンツの最後に新しいコンテンツを追加します。

::first-line

要素の最初の行を選択するには、たとえば各段落のテキストの最初の行のスタイルを変更するには、これを使用できます

::before と ::after

これら 2 つの主な要素は、要素の前後にコンテンツを挿入するために使用されます。私が見た中で最も一般的なのは、float