CSS の疑似クラスと疑似要素の詳細な紹介 (コード例)-CSSチュートリアル-php.cn

CSS の疑似クラスと疑似要素の詳細な紹介 (コード例)

不言

リリース： 2019-01-24 10:13:43

転載

3882 人が閲覧しました

この記事では、CSS の疑似クラスと疑似要素について詳しく説明します (コード例)。必要な方は参考にしていただければ幸いです。あなた。

1. 疑似クラス

疑似クラスには、State 疑似クラス (UI 疑似クラス) と の 2 つのタイプがあります。構造擬似クラス。

(1) ステータス疑似クラスは、要素の現在のステータスに基づいて選択されます。

要素の状態はユーザーとの対話中に動的に変化するため、要素はその状態に応じて異なるスタイルを表示します。このスタイルは、要素が特定の状態にあるときに表示され、別の状態になると失われます。

一般的なステータス疑似クラスには主に次のものが含まれます。

:link はアクセスされていないリンクに適用されます。
:hover はマウスが置かれている要素に適用されます。 active アクティブ化された要素に適用されます。
:visited は訪問済みのリンクに適用され、:link とは相互に排他的です。
:focus は、キーボード入力フォーカスを持つ要素に適用されます。
:target は、リンクをクリックした後に指定される要素に適用されます。

最初の 4 つの疑似クラスは、ここにリストされている順序で使用されない場合、同じ

特異性 を持ちます。ブラウザでは期待どおりの結果が表示されない場合があります。覚えやすくするために、次のように考えてください: "LoVe? HA!" 大文字は、各疑似クラスの最初の文字です。

input:focus {border:1px solid blue;}

ログイン後にコピー

カーソルが入力フィールドにあると、フィールドに青い枠線が追加されます。これにより、ユーザーは入力した文字がどこに表示されるかを明確に知ることができます。

<a href="#more_info">More Information</a>
<h2 id="more_info">This is the information you are looking for.</h2> 
#more_info:target {background:#eee;}

ログイン後にコピー

は、ユーザーがリンクをクリックして ID more_info の要素にリダイレクトすると、要素に明るい灰色の背景を追加します。

(2) 構造擬似クラスは CSS3 の新しいセレクターです。

dom ツリーを使用して要素をフィルタリングし、ドキュメント構造の相互関係を通じて要素を照合します。これにより、要素の定義を減らすことができます。 class 属性と id 属性により、ドキュメント構造がより簡潔になります。

一般的なものは次のとおりです。

:first-child は要素の最初の子要素を選択します。

:last-child は要素の最後の子要素を選択します。

:nth -child() は、要素の 1 つ以上の特定の子要素を選択します。
:nth-last-child() は、最後の子要素から開始して、要素の 1 つ以上の特定の子要素を選択します。 :nth-of-type() は指定された要素を選択します。
:nth-last-of-type() は指定された要素を選択し、最後の要素からカウントを開始します。
:first-of-type は最初の要素を選択します。上位要素の下にある同じ型の子要素。
:last-of-type は上位要素の下にある同じ型の最後の子要素を選択します。この要素は、次の要素の唯一の子要素です。親要素;
:only-of-type は、親要素と同じ型の唯一の子要素である要素を選択します。
:empty 選択された要素にはコンテンツがありません。

2. 擬似要素

擬似要素は、状態を記述するのではなく、要素内の特定のコンテンツに対して動作します。その操作レベルは疑似クラスよりも 1 レベル深いため、その動的性は疑似クラスよりもはるかに低くなります。実際、擬似要素は、特定の要素の前後にある通常のセレクターでは実行できないものです。コントロールの内容は要素と同じですが、それ自体は要素に基づく抽象化であり、ドキュメント構造には存在しません。一般的な疑似要素セレクターには、次のものが含まれます。

:first-letter は、要素テキストの最初の文字 (文字) を選択します。

:first-line は要素テキストの最初の行を選択します。

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

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

3. 注

CSS3 疑似クラスには単一コロン (:) が使用され、CSS3 疑似要素には二重コロン (::) が使用されます。一部のブラウザと互換性を持たせるために、通常は単一コロンが使用されます。互換性の問題は postcss に委ねられます。この記事では、プレフィックスの問題を含む互換性の記述方法については説明しません。これについては autoprefixer に任せることができます。 (この文の意味が分かりません。後で見てみましょう)

疑似クラス(構造的疑似クラス)の効果は実際のクラスを追加することで実現できますが、疑似要素は追加することで実現する必要がある実際の要素を実現できるため、一方を疑似クラス、もう一方を疑似要素と呼びます。

4. 擬似要素の使用

(1) float のクリア

.clear:after {
content: '';
display: block;
clear: both;
}

ログイン後にコピー

(2) 分割線の描画

<style>
* {
  padding: 0;
  margin: 0;
}
.spliter::before, .spliter::after {
  content: '';
  display: inline-block;
  border-top: 1px solid black;
  width: 200px;
  margin: 5px;
}
  </style></head><body>
  <p class="spliter">分割线</p></body>

ログイン後にコピー

以上がCSS の疑似クラスと疑似要素の詳細な紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。