CSSで疑似クラスと疑似要素を区別するにはどうすればよいですか?疑似クラスと疑似要素の違いと使い方（コード例）-CSSチュートリアル-php.cn

CSSで疑似クラスと疑似要素を区別するにはどうすればよいですか?疑似クラスと疑似要素の違いと使い方（コード例）

青灯夜游

リリース： 2018-09-10 12:47:23

オリジナル

1892 人が閲覧しました

フロントエンド開発を学ぶとき、CSS の疑似クラスと疑似要素を常に混同することがあります。では、CSS の疑似クラスとは何でしょうか?擬似要素とは何ですか?それらの違いは何ですか?またどのように使用されますか?この章では、CSS の疑似クラスと疑似要素について説明し、CSS の疑似クラスと疑似要素の違いと基本的な使い方を紹介します。困っている友人は参考にしていただければ幸いです。

1. 疑似クラス (特定のセレクターに特殊効果を追加するために使用されます)

疑似クラスの目的は、DOM ツリーに存在せず、通常のメソッドでは使用できない情報を見つけるためにセレクターを使用することです。 CSS セレクタによって取得される情報。疑似クラスはコロンで始まり、その後に疑似クラスの名前と括弧で囲まれたオプションのパラメータが続きます。通常のセレクターはどこでも疑似クラスを使用できます。疑似クラスの構文では大文字と小文字が区別されません。一部の擬似クラスの機能は相互に排他的であり、他の擬似クラスは同じ要素によって同時に使用できます。さらに、ユーザーが DOM を操作するときに発生する DOM 構造の変更に対応するために、疑似クラスを動的にすることもできます。

疑似クラスには、状態疑似クラスと構造疑似クラスの 2 種類があります。

状態擬似クラスは、要素の現在の状態に基づいて選択されます。要素の状態はユーザーとの対話中に動的に変化するため、要素の表示はその状態に応じて異なります。このスタイルは、要素が特定の状態にあるときに表示され、別の状態になると失われます。一般的なステータス疑似クラスには主に次のものがあります:

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

構造擬似クラスは、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-child 選択された要素は、その親要素の唯一の子要素です。 :only-of-type は、その上位要素と同じ型の唯一の子要素である要素を選択します。 :empty 選択された要素にはコンテンツがありません。

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪类</title>
		<style>
			.demo {
				width: 200px;
				height: 500px;
				margin: 50px auto;
				text-align: center;
			}
			.tab_content {
			  	height: 50px;
			  	background: red;
			  	margin-bottom: 10px;
			}
			#tab1:target, #tab2:target, #tab3:target {
			    background:blue;
			    line-height: 50px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<ul class="tabs">
			    <li><a href="#tab1">标签一</a></li>
			    <li><a href="#tab2">标签二</a></li>
			    <li><a href="#tab3">标签三</a></li>
			</ul>
			<div id="tab1" class="tab_content">tab1</div>
			<div id="tab2" class="tab_content">tab2</div>
			<div id="tab3" class="tab_content">tab3</div>
		</div>
	</body>
</html>

ログイン後にコピー

レンダリング 1:

レンダリング 2:

CSSで疑似クラスと疑似要素を区別するにはどうすればよいですか?疑似クラスと疑似要素の違いと使い方（コード例）上記のレンダリング 1 と 2 の違いは、ラベル 1 をクリックすると、tab1 ボックスの背景の色が変化することです。が赤から青に変わり、フォントの色が白に変わります。タブ 2 をクリックするとタブ 2 に変わり、タブ 3 をクリックすると同じことが起こります。

2: 擬似要素 (特定のセレクターに特殊効果を追加するために使用されます) CSSで疑似クラスと疑似要素を区別するにはどうすればよいですか?疑似クラスと疑似要素の違いと使い方（コード例）

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

一般的な疑似要素セレクターには以下が含まれます: :first-letter は、要素テキストの最初の文字 (レター) を選択します。 :first-line は要素テキストの最初の行を選択します。 :before は、要素コンテンツの前に新しいコンテンツを追加します。 :after は、要素コンテンツの最後に新しいコンテンツを追加します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo {
				width: 500px;
				height: 500px;
				margin: 50px auto;
				text-align: center;
			}
			.spliter::before, .spliter::after {
		      	content: &#39;&#39;;
		      	display: inline-block;
		      	border-top: 1px solid black;
		      	width: 200px;
		      	margin: 5px;
		    }
		</style>
	</head>
	<body>
		<div class="demo">
			<p class="spliter">分割线</p>
		</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSSで疑似クラスと疑似要素を区別するにはどうすればよいですか?疑似クラスと疑似要素の違いと使い方（コード例）