CSS の ID セレクターとクラスセレクターとは何ですか? idとClassセレクターの使い方（例）-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS の ID セレクターとクラスセレクターとは何ですか? idとClassセレクターの使い方（例）

青灯夜游

Sep 15, 2018 am 09:23 AM

クラスセレクターcssIDセレクター

この章では、CSS の ID セレクターとクラスセレクターについて説明します。 ID およびクラスセレクターの使用法 (例)。困っている友人は参考にしていただければ幸いです。

1. ID セレクター

ID セレクターは、特定の ID でマークされた HTML 要素の特定のスタイルを指定できます。

HTML 要素は id 属性を使用して ID セレクターを設定し、CSS の ID セレクターは "#" で定義されます。

次のスタイルルールは要素属性 id="demo"、id="para1":

#demo{ width: 500px; height: 200px; margin: 50px auto; } 
#para1 { text-align:center; color:red; }

注: ID 属性を数字で始まる ID で始めないでください。 Mozilla/Firefox にあるブラウザでは動作しません。

サンプルコード:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>id 选择器</title>
		<style>
		     #demo{ width: 500px; height: 200px; margin: 50px auto; } 
                     #para1 { text-align:center; color:red; }
		</style>
	</head>
	<body>
		<div id="demo">
			<p id="para1">Hello World!</p>
			<p>这个段落不受该样式的影响。</p>
		</div>
	</body>
</html>

レンダリング:

CSS の ID セレクターとクラスセレクターとは何ですか? idとClassセレクターの使い方（例）

##2. クラスセレクター

クラスセレクターは、要素のグループのスタイルを記述するために使用されます。クラスセレクターは、複数の要素で使用できます。

クラスセレクターは、HTML の class 属性によって表されます。CSS では、クラスセレクターはドット「.」で表示されます。

次の例では、中心クラスを持つすべてのオブジェクトが表示されます。 HTML 要素はすべて中央揃えで配置されます。

.center {text-align:center;}

サンプルコード:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>class 选择器/title> 
<style>
.center
{
    text-align:center;
}
</style>
</head>

<body>
<h1 id="标题居中">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

レンダリング:

CSS の ID セレクターとクラスセレクターとは何ですか? idとClassセレクターの使い方（例）

クラスを使用して特定の HTML 要素を指定することもできます。

次の例では、すべての p 要素は class="center" を使用して要素のテキストを中央に配置します:

p.center {text-align:center;}

注: クラス名の最初の文字数字は使えません！ Mozilla や Firefox では動作しません。

コード例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css教程</title> 
<style>
p.center
{
    text-align:center;
}
</style>
</head>

<body>
<h1 id="这个标题不受影响">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p> 
</body>
</html>

レンダリング:

CSS の ID セレクターとクラスセレクターとは何ですか? idとClassセレクターの使い方（例）

以上がCSS の ID セレクターとクラスセレクターとは何ですか? idとClassセレクターの使い方（例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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