一般的に使用される CSS3 の基本セレクターは何ですか?-フロントエンドQ&A-php.cn

一般的に使用される CSS3 の基本セレクターは何ですか?

青灯夜游

リリース： 2021-12-20 10:51:04

オリジナル

7236 人が閲覧しました

一般的に使用される CSS3 基本セレクターには、1. ワイルドカードセレクター "*"、2. クラスセレクター ".class name"、3. 要素セレクター、4. ID セレクター "#id name"、5. グループが含まれます。セレクター「E、F、...」は、同じスタイルを持つ要素をグループ化できます。各セレクターを区切るには、カンマ「,」を使用します。

一般的に使用される CSS3 の基本セレクターは何ですか?

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

css3 の 5 つの一般的な基本セレクター

1. ワイルドカードセレクター (すべてのブラウザーでサポートされています)

一般的なセレクターは次のとおりです。 * で表され、すべての要素、または特定の要素の下にあるすべての要素を選択するために使用されます;

*{marigin: 0;
 padding: 0;
 font-size: 14px;
}

ログイン後にコピー

リセットスタイルファイルで上記のコードを何度も見たことがあるはずです。また、それが何を表しているか、はい、マージンです。すべての要素のパディングは 0 に設定され、フォントサイズは 14px に設定されます。もう 1 つの方法は、特定の要素の下にあるすべての要素を選択することです:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通配符选择器</title>
		<style>
			.demo * {
				width: 50px;
				height: 50px;
				border: 1px solid blue;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div>1</div>
			<p>2</p>
			<span>3</span>
		</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

demo 要素の 3 つのサブ要素 div、p、span にはそれぞれ CSS スタイルが設定されていないことがわかりますが、demo 要素の下のすべての要素に統一されたスタイルを設定している限り、すると、デモ要素の 3 つのサブ要素 div、p、span にスタイルが表示されます。

2. クラスセレクター (すべてのブラウザーはクラスセレクターをサポートしていますが、マルチクラスセレクター (.className1.className2) は ie6 ではサポートされていません。)

クラスセレクター先頭に "." が付いているクラス名に基づいて選択します。これは、ドキュメント要素から独立した方法でスタイルを指定します。クラスセレクターを使用する前に、html 要素でクラス名を定義する必要があります。つまり、クラスの名前が html タグに存在することを確認する必要があります。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
		<style>
			.demo {
				width: 200px;
				height: 200px;
				margin: 50px auto;
				background: #2DC4CB;
			}
		</style>
	</head>
	<body>
		<div class="demo">类选择器</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

3. 要素セレクター (すべてのブラウザでサポート)

要素の選択 (タグname selector) は、CSS3 セレクターの中で最も一般的で基本的なセレクターです。要素セレクターは、実際には、html、body、p、p などのドキュメントの要素です。次の例では、span 要素が選択され、フォントの色が赤に設定されています。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素选择器</title>
		<style>
			.demo {
				width: 200px;
				height: 200px;
				margin: 50px auto;
			}

			span {
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<p>这里使用<span>元素选择器</span>改变了样式</p>
		</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

4.ID セレクター (すべてのブラウザーがサポート)

ID セレクターは非常に優れています。前述のクラスセレクターと似ています。ID セレクターを使用する前に、対応する要素がスタイルセレクターで見つかるように、HTML ドキュメントに ID 名を追加する必要があります。違いは ID の選択です。セレクターが唯一の値です。クラスを使用する場合、対応するクラス名の前に「.」記号 (.className) を追加し、ID セレクターでは (#demo) のように名前の前に「#」を使用します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ID选择器</title>
		<style>
			#demo {
				width: 200px;
				height: 200px;
				margin: 50px auto;
				background: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="demo">ID选择器</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

ID セレクターには特別な注意が必要な場所がいくつかあります:

最初: ドキュメント内の 1 つの ID id はページ内で一意であるため、selector は 1 回のみ使用できます。

第 2 に、id セレクターをクラスセレクターのように組み合わせて使用することはできず、要素には 1 つの ID 名しか付けられません。

3 番目に、異なるドキュメントで同じ ID 名を使用できます。たとえば、「test.html」の h1 に「# important」を定義したり、「test1.html」に p を定義したりできます。 idは「# important」ですが、前提としてtest.htmlでもtest1.htmlでも「#重要」というidは1つだけ許されます。

5. グループセレクター (すべてのブラウザでサポート)

複数の要素が同じスタイル属性を持つ場合、ステートメントをまとめて呼び出し、カンマ区切りを使用できます。グループセレクターは、同じスタイルを持つ要素をグループ化します。各セレクターはカンマ「,」で区切られます。このカンマは、ルールに複数の異なるセレクターが含まれていることをブラウザーに伝えます。カンマ , がない場合、表現される意味はまったく異なります。省略カンマは先ほどの子孫セレクターになりますので、使用する際には注意が必要です。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>群组选择器</title>
		<style>
			.demo {
				width: 200px;
				height: 200px;
				margin: 50px auto;
				background: #FF0000;
			}

			p,
			li {
				color: blue;
			}

			.demo1,
			.demo2 {
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<p>这里是一个段落!</p>
			<ul>
				<li>列表</li>
			</ul>
			<a href="#" class="demo1">链接一</a><br>
			<span class="demo2">文字文字！</span>
		</div>
	</body>
</html>

ログイン後にコピー

レンダリング: