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

ホームページ

ウェブフロントエンド

フロントエンドQ&A

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

青灯夜游

Dec 20, 2021 am 10:51 AM

css基本的なセレクター

一般的に使用される 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>

レンダリング:

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

以上が一般的に使用される CSS3 の基本セレクターは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

CSS IDS対クラス：アクセシビリティに適しているのはどれですか？May 10, 2025 am 12:02 AM

classesarebetterforaccesibility inwebdevelopment.1）ClassscanbeappliedTomultipleements、sunsistentStylesandbehaviorsを保証します

CSS：クラスセレクターとIDセレクターの違いを理解するMay 09, 2025 pm 06:13 PM

classSeLectorEreusableformultipleElements、whiledselectorectorsareuniqueandusedonceperpage.1）クラスは、byperiod（。）、areideal forstylingmultipleementslikebuttons.2）、ids（＃）、aerpectforuniqueelementslikeanivigationmenu.3）idshsheaveavehe.3）を示します

CSSスタイリング：クラスセレクターとIDセレクターの選択May 09, 2025 pm 06:09 PM

CSSスタイルでは、プロジェクトの要件に従ってクラスセレクターまたはIDセレクターを選択する必要があります。1）クラスセレクターは再利用に適しており、同じスタイルの複数の要素に適しています。 2）IDセレクターは一意の要素に適しており、優先度が高いが、メンテナンスの困難を避けるためには注意して使用する必要があります。

HTML5：制限May 09, 2025 pm 05:57 PM

html5hasseverallimitationsincludingluding foradvancedgraphics、basicformvalidation、cross-browsercompatibilityissues、performurympacts、andsecurityconcerns.1）forcomplexgraphics、html5'scanvasisisuffish、resiclirarielikelikelikeweblorthree.2）i

CSS：あるスタイルは別のスタイルよりも優先されますか？May 09, 2025 pm 05:33 PM

はい、ounestylecanhavemorepiritythananincssduetsificity andthecascade.1）dipitiesalityactsasascoringsystemwheremorepifictoreshavehigherpriolity.2）thecascadedededereminesstytyleapplication order、

HTML5仕様の重要な目標は何ですか？May 09, 2025 pm 05:25 PM

theSignificAntgoalsofhtml5aretoenhancemultimediasupport、Humanreadability、維持、Andensurebackwardcompativecivity.1）html5improvesmultimediawithnativeelementslikeand.2）ituseSseSseSseSseSseSseSseSseSseSmanticeForementionforementionforementionforementionforementionforemention foremantemention

Reactの限界は何ですか？May 02, 2025 am 12:26 AM

raceslimitationsinclude：1）asteeplearningcurveduetoitsvastecosystem、2）seochallengeswithsclient-siderEndering、3）潜在的なパフォーマンスのinlargeapplications、4）complenstatemanagementasappsgrow、and5）suneedtokeepupwithovolution

Reactの学習曲線：新しい開発者にとっての課題May 02, 2025 am 12:24 AM

ReactisChallengingを使用して、SteepLearNdParadigMshiftOconpontenAchitecture.1）startisofficialdocumentation forasolidfoundation.2）relondingjsxandjavascriptwithinit.3）LearntousefunctionalcompotontiTateを理解してください

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、