ホームページ > 記事 > ウェブフロントエンド > CSSセレクターとは何ですか? css3 の 5 つの一般的な基本セレクター (コード例)
CSSセレクターとは何ですか? css3 の 5 つの一般的な基本セレクター (コード例)
- 青灯夜游オリジナル
- 2018-09-10 11:10:4910281ブラウズ
この章では、CSS セレクターとは何なのかについて説明します。 css3 の 5 つの一般的な基本セレクター。困っている友人は参考にしていただければ幸いです。
1: css セレクターとは何ですか?
CSS は、HTML、XML などを画面上にレンダリングするために使用される言語であり、主に対応する要素にスタイルを適用して、相対的に適用される要素をレンダリングするため、対応する要素をどのように選択するかが非常に重要です。対応する要素を選択するには、いわゆるセレクターが必要です。 CSS では、セレクターは、スタイルを設定する必要がある要素を選択するために使用されるパターンです。セレクターは主に、HTML のツリー構造内の DOM 要素ノードを決定するために使用されます。
2: css3 の 5 つの一般的な基本セレクター
css3 には多くの種類のセレクターがあります。次に、ワイルドカード セレクター、クラス セレクター、要素セレクター、ID セレクター、およびグループ セレクターの 5 つの一般的な基本セレクターを示します。
1. ワイルドカード セレクター (すべてのブラウザでサポートされています)
ユニバーサル セレクターは * で表され、特定の要素の下にあるすべての要素を選択することもできます
*{marigin: 0;
padding: 0;
font-size: 14px;
}上記のコードはリセット スタイルです。ドキュメントには多くのものが含まれているはずです。つまり、すべての要素のマージンとパディングが 0 に設定され、フォント サイズが 14 ピクセルに設定されているということです。もう 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>Rendering :
 "153654702728376CSSセレクターとは何ですか? css3 の 5 つの一般的な基本セレクター (コード例)")
2. クラス セレクター (すべてのブラウザーはクラス セレクターをサポートしていますが、マルチクラス セレクター (.className1.className2) は ie6 ではサポートされていません。)
クラス セレクターは、「 .」が前に付くクラス名に基づいて選択します。 mark は、ドキュメント要素から独立した方法でスタイルを指定します。クラス セレクターを使用する前に、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. 要素セレクター (すべてのブラウザでサポート) 要素セレクター (タグ名セレクター) は、css3 セレクターの中で最も一般的で基本的なセレクターです。要素セレクターは、実際には、html、body、p、div などのドキュメントの要素です。次の例では、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 セレクターを使用する前に、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>レンダリング:
第 2 に、ID セレクターはクラス セレクターのように組み合わせて使用できず、要素には 1 つの ID 名しか付けられません。 第三に、同じ ID 名を異なるドキュメント (たとえば「test.」) で使用できます。 「html」のh1には「#重要」が設定されており、「test1.html」ではpのidを「#重要」として定義することもできますが、前提としてtest.htmlとtest1のどちらか一方のidは1つだけしか許されません。 .html 「#重要」の存在。
5. グループセレクター (すべてのブラウザーでサポートされています)
複数の要素が同じスタイル属性を持つ場合、ステートメントをまとめて呼び出し、要素をカンマで区切ることができます。グループ セレクターは、同じスタイルの要素をグループ化します。各セレクターは、コンマ「,」で区切られます。このコンマは、ルールに複数の異なるセレクターが含まれていることを示します。カンマを省略すると、表現される意味がまったく異なります。カンマは前述した子孫セレクターになります。これを使用する場合は注意が必要です。rreee
レンダリング:
以上がCSSセレクターとは何ですか? css3 の 5 つの一般的な基本セレクター (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。