一般的に使用される 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 までご連絡ください。

React：現代のフロントエンド開発の基礎Apr 19, 2025 am 12:23 AM

Reactは、最新のフロントエンドアプリケーションを構築するためのJavaScriptライブラリです。 1.パフォーマンスを最適化するために、コンポーネントおよび仮想DOMを使用します。 2。コンポーネントJSXを使用して、データを管理するために定義、状態、および属性を定義します。 3.フックはライフサイクル管理を簡素化します。 4. Contextapiを使用して、グローバルステータスを管理します。 5.一般的なエラーには、デバッグステータスの更新とライフサイクルが必要です。 6。最適化手法には、メモ、コード分割、仮想スクロールが含まれます。

Reactの未来：Web開発におけるトレンドと革新Apr 19, 2025 am 12:22 AM

Reactの未来は、究極のコンポーネント開発、パフォーマンスの最適化、および他のテクノロジースタックとの深い統合に焦点を当てます。 1）Reactは、コンポーネントの作成と管理をさらに簡素化し、究極のコンポーネント開発を促進します。 2）特に大規模なアプリケーションでは、パフォーマンスの最適化が焦点になります。 3）Reactは、開発エクスペリエンスを改善するために、GraphQLやTypeScriptなどのテクノロジーと深く統合されます。

React：UIコンポーネントを構築するための強力なツールApr 19, 2025 am 12:22 AM

Reactは、ユーザーインターフェイスを構築するためのJavaScriptライブラリです。その核となるアイデアは、コンポーネントを通じてUIを構築することです。 1.コンポーネントは、UIロジックとスタイルをカプセル化する反応の基本単位です。 2。仮想DOMと状態管理はコンポーネントの作業の鍵であり、状態はSetStateから更新されます。 3.ライフサイクルには、マウント、更新、アンインストールの3つのステージが含まれます。パフォーマンスは、合理的に使用して最適化できます。 4. UseStateとContextapiを使用して、状態を管理し、コンポーネントの再利用性とグローバルな州管理を改善します。 5.一般的なエラーには、不適切なステータスの更新とパフォーマンスの問題が含まれます。これは、ReactDevtoolsを介してデバッグできます。 6.パフォーマンス最適化の提案には、メモの使用、不必要な再レンダリングの回避、および私たちの使用が含まれます

HTMLとのReactを使用：コンポーネントとデータのレンダリングApr 19, 2025 am 12:19 AM

HTMLを使用してReactでコンポーネントとデータをレンダリングすることは、次の手順を通じて達成できます。JSX構文の使用：JSX構文を使用してHTML構造をJavaScriptコードに埋め込み、コンパイル後にDOMを操作します。コンポーネントはHTMLと組み合わされます。Reactコンポーネントはプロップを介してデータを渡し、などのHTMLコンテンツを動的に生成します。データフロー管理：Reactのデータフローは、親コンポーネントから子コンポーネントに渡される一方通行であり、アプリコンポーネントが名前を挨拶に渡すなど、データフローが制御可能であることを保証します。基本的な使用例：マップ関数を使用してリストをレンダリングするには、フルーツリストのレンダリングなどのキー属性を追加する必要があります。高度な使用例：UseStateフックを使用して状態を管理し、ダイナミクスを実装する

Reactの目的：シングルページアプリケーションの構築（SPA）Apr 19, 2025 am 12:06 AM

Reactは、ユーザーインターフェイスを構築するための効率的で柔軟な方法を提供するため、シングルページアプリケーション（SPA）を構築するための好ましいツールです。 1）コンポーネント開発：複雑なUIを独立した再利用可能な部分に分割して、保守性と再利用性を向上させます。 2）仮想DOM：仮想DOMと実際のDOMの違いを比較することにより、レンダリングパフォーマンスを最適化します。 3）状態管理：状態および属性を介したデータフローを管理して、データの一貫性と予測可能性を確保します。

React：Web開発のためのJavaScriptライブラリの力Apr 18, 2025 am 12:25 AM

Reactは、メタがユーザーインターフェイスを構築するために開発したJavaScriptライブラリであり、そのコアはコンポーネント開発と仮想DOMテクノロジーです。 1。コンポーネントと状態管理：Reactは、コンポーネント（関数またはクラス）とフック（UseStateなど）を介して状態を管理し、コードの再利用性とメンテナンスを改善します。 2。仮想DOMとパフォーマンスの最適化：仮想DOMを介して、実際のDOMを効率的に更新してパフォーマンスを向上させます。 3.ライフサイクルとフック：フック（使用効果など）は、関数コンポーネントがライフサイクルを管理し、副作用操作を実行できるようにします。 4。使用例：基本的なHelloworldコンポーネントから高度なグローバル州管理（USECONTEXTおよび

Reactのエコシステム：ライブラリ、ツール、およびベストプラクティスApr 18, 2025 am 12:23 AM

Reactエコシステムには、状態管理ライブラリ（Reduxなど）、ルーティングライブラリ（Reactrouterなど）、UIコンポーネントライブラリ（材料-UIなど）、テストツール（JESTなど）、およびビルディングツール（Webpackなど）が含まれます。これらのツールは、開発者がアプリケーションを効率的に開発および維持し、コードの品質と開発効率を向上させるのを支援するために協力します。

反応とフロントエンドの開発：包括的な概要Apr 18, 2025 am 12:23 AM

Reactは、ユーザーインターフェイスを構築するためにFacebookが開発したJavaScriptライブラリです。 1. UI開発の効率とパフォーマンスを改善するために、コンポーネントおよび仮想DOMテクノロジーを採用しています。 2。Reactのコア概念には、コンポーネント化、状態管理（UseStateやUseEffectなど）、および仮想DOMの作業原則が含まれます。 3。実際のアプリケーションでは、基本的なコンポーネントレンダリングから高度な非同期データ処理へのReactサポートがサポートされます。 4.主要な属性の追加や誤ったステータスの更新を忘れるなどの一般的なエラーは、ReactDevtoolsとログを介してデバッグできます。 5.パフォーマンスの最適化とベストプラクティスには、React.Memo、コードセグメンテーション、コードの読み取り可能な状態を維持し、信頼性を維持することが含まれます

See all articles