CSSにはどのようなセレクターがありますか?

CSS セレクターには、1. カテゴリ セレクター、2. タグ セレクター、3. ID セレクター、4. 子孫セレクター、5. サブセレクター、6. 疑似クラス セレクター、7 、ユニバーサル セレクター、8.グループ セレクター; 9. 隣接兄弟セレクター; 10. 属性セレクター; 11. 擬似要素セレクター。

このチュートリアルの動作環境: Windows7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css セレクターの紹介:

1. カテゴリ セレクター

クラス セレクターは、先頭に "." が付いたクラス名に基づいて選択します。

例:

.demoDiv{
color:#FF0000;
}

2. タグ セレクター

完全な HTML ページはさまざまなタグで構成されており、タグ セレクターは、対応する CSS スタイルに使用されるタグを決定します。

style.css ファイル内の p タグ スタイルの宣言は次のとおりです:

p{
font-size:12px;
background:#900;
color:090;
}

3. ID セレクター

ID セレクターには、次のようにマークされた HTML 要素を指定できます。特定の ID 特定のスタイルを指定します。要素 ID に基づいて要素を選択します。要素 ID は一意です。つまり、同じ ID は同じドキュメント ページに 1 回だけ表示されます。

の前には「#」記号が付き、次のようにスタイルで定義できます:

#demoDiv{
color:#FF0000;
}

4. 子孫セレクター

子孫セレクターは包含とも呼ばれます。セレクターは、特定の要素または要素グループの子孫を選択するために使用されます。親要素の選択内容は前に配置され、子要素の選択内容は中央にスペースで区切られて後ろに配置されます。

<style>
.father.child{
color:#0000CC;
}
</style>
<p class="father">
黑色
<label class="child">蓝色
<b>也是蓝色</b>
</label>
</p>

5. 子セレクター

このセレクターと子孫セレクターの違いに注意してください。子セレクターは、その直接の子孫のみを参照するか、またはそのセレクターが機能しているものとして理解できます。子要素の最初の子孫に。子孫セレクターは、すべての子子孫要素に作用します。子孫セレクターはスペースで選択し、子セレクターは「>」で選択します。

次のコードを見てみましょう:

サンプル ソース コード

CSS：

#links a {color:red;}
#links > a {color:blue;}

HTML：

<p id="links">
<a href="#">HTML中文网</a>>
<span><a href="#">CSS布局实例</a></span>
<span><a href="#">CSS教程</a></span>
</p>

6.クラス選択 ハンドラー

マウス ホバーなど、要素のスタイルを適用するために、ドキュメントの外部で他の条件を使用する必要がある場合があります。現時点では、疑似クラスを使用する必要があります。以下は、リンクされたアプリケーションの疑似クラス定義です。

a:link{
color:#999999;
}
a:visited{
color:#FFFF00;
}
a:hover{
color:#006600;
}
/* IE不支持，用Firefox浏览可以看到效果 */
input:focus{
background:# E0F1F5;
}

7. ユニバーサル セレクター

ユニバーサル セレクターは * で表されます。例:

*{
font-size: 12px;
}

は、すべての要素のフォント サイズが 12px であることを意味し、同時に、ユニバーサル セレクターを子孫セレクターと組み合わせることもできます。

8. グループ セレクター

複数の要素が同じスタイル属性を持つ場合、ステートメントをまとめて呼び出し、要素をカンマで区切ることができます。例:

p, td, li {
line-height:20px;
color:#c00;
}
#main p, #sider span {
color:#000;
line-height:26px;
}
.#main p span {
color:#f60;
}
.text1 h1,#sider h3,.art_title h2 {
font-weight:100;
}

グループ セレクターを使用すると、CSS コードが大幅に簡素化されます。複数の同一の属性を持つ要素をグループに結合して選択でき、同じ CSS 属性を定義できるため、コーディングの効率が大幅に向上します。また、CSS ファイルのサイズも削減されます。

9. 隣接する兄弟セレクター

上記の子セレクターと子孫セレクターに加えて、タイトル h1 要素など、2 つの兄弟のうちの 1 つを検索することもできます。の後には 2 つの段落 p 要素が続きます。最初の段落 p 要素を見つけて、それにスタイルを適用したいと考えています。隣接兄弟セレクターを使用できます。

10. 属性セレクター

htmlタグの特定の属性が存在するかどうかを判断してcssを定義できます。

属性セレクターは、要素の属性に基づいて照合されます。その属性は、標準属性またはカスタム属性にすることができます

11. 擬似要素セレクター

#すべて擬似-要素セレクターは、擬似要素が出現するセレクターの最後に配置する必要があります。つまり、擬似要素セレクターの後に派生セレクターを置くことはできません。

推奨学習:

css ビデオ チュートリアル

以上がCSSにはどのようなセレクターがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。