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

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

青灯夜游

リリース： 2018-09-15 09:23:35

オリジナル

3449 人が閲覧しました

この章では、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 class="center">标题居中</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 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p> 
</body>
</html>

ログイン後にコピー

レンダリング:

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