ホームページ > 記事 > ウェブフロントエンド > CSS の ID セレクターとクラス セレクターとは何ですか? idとClassセレクターの使い方（例）
CSS の ID セレクターとクラス セレクターとは何ですか? idとClassセレクターの使い方（例）
- 青灯夜游オリジナル
- 2018-09-15 09:23:353426ブラウズ
この章では、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>レンダリング:
##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>レンダリング: 
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セレクターの使い方（例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。