ホームページ  >  記事  >  ウェブフロントエンド  >  CSSセレクターとは何ですか? css3 の 5 つの一般的な基本セレクター (コード例)

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

青灯夜游
青灯夜游オリジナル
2018-09-10 11:10:4910304ブラウズ

この章では、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 つの一般的な基本セレクター (コード例)

以上がCSSセレクターとは何ですか? css3 の 5 つの一般的な基本セレクター (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。