CSS にはハイパーテキストタグセレクターはありますか?-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2023-01-04 09:34:31

オリジナル

3582 人が閲覧しました

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 サイトの他の関連記事を参照してください。