CSSの基本的なセレクターとは何ですか-フロントエンドQ&A-php.cn

CSSの基本的なセレクターとは何ですか

青灯夜游

リリース： 2021-11-02 18:25:22

オリジナル

9517 人が閲覧しました

CSS の基本セレクターとは、1. ワイルドカードセレクター、2. タグセレクター、3. クラスセレクター、4. ID セレクター、5. 結合要素セレクター、6. マルチカテゴリ選択デバイスを指します。

CSSの基本的なセレクターとは何ですか

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

基本セレクターの紹介

基本セレクターは、ワイルドカードセレクター、タグセレクター、クラスセレクター、ID セレクター、結合要素セレクター、複数のセレクターなど、6 つの使用方法に分かれています。タイプセレクター。
基本的なセレクターの使用手順の表。

#セレクター文法形式意味例ワイルドカードセレクタータグセレクタークラスセレクターID セレクター結合要素セレクター複数クラスセレクター

ワイルドカードセレクター

次に、ユニバーサルセレクターの実践に入りましょう。作成者は埋め込みフォームを使用して、HTML ページに h1 を挿入します。タグと p タグのフォントの色は赤に設定されます。
コードブロック

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通配符选择器</title>
		<style>
			* {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>
	</body>
</html>

ログイン後にコピー

結果グラフ

CSSの基本的なセレクターとは何ですか

タグセレクター

次に、タグセレクターの実践に入りましょう。作成者は埋め込みフォームを使用して、HTML ページに h1 を挿入します。タグと p タグのフォントの色は赤に設定されます。
コードブロック

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标签选择器</title>
		<style>
			h1 {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>
	</body>
</html>

ログイン後にコピー

結果グラフ

CSSの基本的なセレクターとは何ですか

注: タグセレクターは、指定されたタグのスタイルの設定を指します。

コードブロック

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标签选择器</title>
		<style>
			h1 {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1>成功不是击败别人，而是改变自己。</h1>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>
	</body>
</html>

ログイン後にコピー

結果の画像
これで、p タグが変更されなかった理由が誰でもわかるはずです。タグセレクターの機能は、指定されたタグのスタイルを設定することであるためです。次に、作成者は p タグの文字色は赤色に設定されます。
コードブロック

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标签选择器</title>
		<style>
			h1 {
				color: red;
			}

			p {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1>成功不是击败别人，而是改变自己。</h1>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>
	</body>
</html>

ログイン後にコピー

結果グラフ

クラスセレクター

次に、クラスセレクターの実践に入りましょう。作成者は、クラスの属性値を使用して埋め込みフォームの .box を完成させますHTML ページの h1 タグと p タグのフォントの色は赤に設定されます。
まず、HTML ページの最初の h1 タグのフォントの色を赤に設定します。
コードブロック

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
		<style>
			.box {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1 class="box">成功不是击败别人，而是改变自己。</h1>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>
	</body>
</html>

ログイン後にコピー

結果グラフ
注: class 属性の値が .box である限り、ラベルが何であっても、フォントの色は赤に設定され、残りの CSS は赤に設定されます。 スタイルこれも一貫しています。
次に、2 番目の h1 タグと p タグのフォントの色を赤に設定します。
コードブロック

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
    <style>
        .box{
            color:red;
        }
    </style>
</head>

<body>
    <h1 class="box">成功不是击败别人，而是改变自己。</h1>
	<h1 class="box">PHP中文网</h1>
	<p class="box">PHP中文网</p>
</body>
</html>

ログイン後にコピー

結果グラフ

Id セレクター

次に、id セレクターの実践に入りましょう。作成者は、埋め込みフォームで id 属性値を # として使用します。 #box では、HTML ページの h1 タグのフォントの色を赤に設定します。
コードブロック

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>id选择器</title>
		<style>
			#box {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1 id="box">成功不是击败别人，而是改变自己。</h1>
	</body>
</html>

ログイン後にコピー

結果グラフ
注:
id セレクターを使用すると、指定された id 属性値でスタイルを設定しますが、HTML ページでは次の点に注意してください。 id の属性値は一意である必要があります。

結合要素セレクター

次に、要素セレクターを結合する練習を始めましょう。作成者は埋め込みフォームで
を使用しています。 h2 tagclass 属性値は、.box 要素のフォントの色で、赤に設定されます。
コードブロック

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>结合元素选择器</title>
		<style>
			h2.box {
				color: red;
			}
		</style>
	</head>

	<body>
		<h2 class="box">成功不是击败别人，而是改变自己。</h2>
		<span class="box">成功不是击败别人，而是改变自己。</span>
	</body>
</html>

ログイン後にコピー

結果グラフ
注: 要素セレクターの実行原理は次のように説明されます。まず、
h2 タグを見つけてから、h2 タグに移動して class を見つけます。 属性値。.box、class 属性値が .box であることが判明した場合は、そのスタイルを設定します。これで、span タグの下の class 属性値 .box がレンダリングされない理由が誰でもわかるはずです。

マルチカテゴリセレクター

次に、マルチカテゴリセレクターの実践に入りましょう。作成者は埋め込みフォームを使用します。
class 属性値には、赤に設定された .box 要素と .box1 要素のフォントの色が含まれます。
コードブロック

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>多类选择器</title>
		<style>
			.box.box1 {
				color: red;
			}
		</style>
	</head>

	<body>
		<h2 class="box1 box">成功不是击败别人，而是改变自己。</h2>
		<span class="box box1">成功不是击败别人，而是改变自己。</span>
		<h2 class="box1 ">PHP中文网</h2>
		<span class="box">PHP中文网</span>
	</body>
</html>

ログイン後にコピー

CSSの基本的なセレクターとは何ですか

注: マルチクラスセレクターの実装原理は次のように説明されます: まず、class 属性値はスペースで区切られた複数の値に設定できます。例: If a class 属性値には .box と .box1 が含まれており、それぞれのスタイルを設定します。2 つのクラスセレクターをリンクすると、これらのクラス名の両方を含む要素のみを選択できます (クラス名の順序は制限されません)。マルチクラスセレクターにクラス名リストにないクラス名が含まれている場合、一致は失敗します。ここで、個々の class 属性値 .box と .box1 はレンダリングされないことがわかります。

(学習ビデオ共有: css ビデオチュートリアル)


*{属性: 値;}	ユニバーサルセレクターは、ページ上のすべての要素を選択し、* を使用してスタイルを適用できます。。 IE6 はサポートしていないため、大規模な Web サイトでは負荷が増加するため、使用はお勧めしません。	*{幅: 300px;}
タグ名{属性: 値;}	タグ選択コンバータ、対応する HTML タグと一致します。	h1{色: 赤;}
.class 属性値{属性: 値;}	クラスselector は、指定されたクラス属性値を持つ要素のスタイルを設定します。	.box{color: red;}
#id 属性値{attribute: value;}	ID セレクター。HTML ドキュメントでは、ID セレクターは 1 回のみ使用されます。 ID セレクターは # で定義されます。	#box{color: red;}
タグ名.class 属性値{attribute: value}	セレクターは、タグ名に指定された .class 属性値が含まれる要素に基づきます。	p.box {color:red;}
.class 属性値.class 属性値 {attribute: value; }	2 つのクラスセレクターをリンクすると、これらのクラス名の両方を含む要素のみを選択できます (クラス名の順序は制限されません)。注: IE7 より前のバージョンでは、さまざまなプラットフォーム上の Internet Explorer がマルチタイプセレクターを正しく処理できませんでした。	.box.box1{色:赤;}