ホームページ  >  記事  >  ウェブフロントエンド  >  CSS にはハイパーテキスト タグ セレクターはありますか?

CSS にはハイパーテキスト タグ セレクターはありますか?

青灯夜游
青灯夜游オリジナル
2021-04-06 15:03:463549ブラウズ

CSS には「ハイパーテキスト タグ セレクター」はありません。CSS に含まれるセレクターは次のとおりです: ID セレクター、クラス セレクター、ラベル セレクター、子孫セレクター、子セレクター、疑似クラス セレクター、疑似要素セレクター、ユニバーサルセレクター "*"、属性セレクター、グループ セレクター、隣接兄弟セレクター。

CSS にはハイパーテキスト タグ セレクターはありますか?

このチュートリアルの動作環境: Windows 7 システム、CSS3 バージョン、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>

(学習ビデオの共有: css ビデオ チュートリアル )

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 にはハイパーテキスト タグ セレクターはありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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