CSSセレクターとは何ですか? css3 の 5 つの一般的な基本セレクター (コード例)-CSSチュートリアル-php.cn

CSSセレクターとは何ですか? css3 の 5 つの一般的な基本セレクター (コード例)

青灯夜游

リリース： 2019-03-12 14:07:58

オリジナル

10280 人が閲覧しました

この章では、CSS セレクターとは何なのかについて説明します。 css3 の 5 つの一般的な基本セレクター。困っている友人は参考にしていただければ幸いです。

1: css セレクターとは何ですか?

CSS は、HTML、XML などを画面上にレンダリングするために使用される言語であり、主に対応する要素にスタイルを適用して、相対的に適用される要素をレンダリングするため、対応する要素をどのように選択するかが非常に重要です。対応する要素を選択するには、いわゆるセレクターが必要です。 CSS では、セレクターは、スタイルを設定する必要がある要素を選択するために使用されるパターンです。セレクターは主に、HTML のツリー構造内の DOM 要素ノードを決定するために使用されます。

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

css3 には多くの種類のセレクターがあります。次に、ワイルドカードセレクター、クラスセレクター、要素セレクター、ID セレクター、およびグループセレクターの 5 つの一般的な基本セレクターを示します。

1. ワイルドカードセレクター (すべてのブラウザでサポートされています)
ユニバーサルセレクターは * で表され、特定の要素の下にあるすべての要素を選択することもできます

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

ログイン後にコピー

上記のコードはリセットスタイルです。ドキュメントには多くのものが含まれているはずです。つまり、すべての要素のマージンとパディングが 0 に設定され、フォントサイズが 14 ピクセルに設定されているということです。もう 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>

ログイン後にコピー

Rendering :

CSSセレクターとは何ですか? css3 の 5 つの一般的な基本セレクター (コード例)

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

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

クラスセレクターは、「 .」が前に付くクラス名に基づいて選択します。 mark は、ドキュメント要素から独立した方法でスタイルを指定します。クラスセレクターを使用する前に、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>

ログイン後にコピー

レンダリング:

CSSセレクターとは何ですか? css3 の 5 つの一般的な基本セレクター (コード例)

3. 要素セレクター (すべてのブラウザでサポート) 要素セレクター (タグ名セレクター) は、css3 セレクターの中で最も一般的で基本的なセレクターです。要素セレクターは、実際には、html、body、p、div などのドキュメントの要素です。次の例では、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>

ログイン後にコピー

レンダリング:

CSSセレクターとは何ですか? css3 の 5 つの一般的な基本セレクター (コード例)

4. ID セレクター (すべてのブラウザーでサポートされています)

ID セレクターは、上記のクラスセレクターと非常によく似ています。ID セレクターを使用する前に、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>

ログイン後にコピー

レンダリング:

CSSセレクターとは何ですか? css3 の 5 つの一般的な基本セレクター (コード例)

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

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

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

第三に、同じ ID 名を異なるドキュメント (たとえば「test.」) で使用できます。「html」のh1には「#重要」が設定されており、「test1.html」ではpのidを「#重要」として定義することもできますが、前提としてtest.htmlとtest1のどちらか一方のidは1つだけしか許されません。 .html 「#重要」の存在。

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

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

rreee

レンダリング:

CSSセレクターとは何ですか? css3 の 5 つの一般的な基本セレクター (コード例)