ホームページ > 記事 > ウェブフロントエンド > CSS 疑似クラス pseudo-element_html/css_WEB-ITnose
CSS 疑似クラス pseudo-element_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:49:141618ブラウズ
CSS セレクターは、基本セレクター、階層セレクター、属性セレクター、疑似クラス、疑似要素の 5 つのカテゴリに大別できます。結局のところ、基本セレクター、階層セレクター、および属性セレクターは、DOM 内で目に見える具体的な要素であるため、理解しやすくなります。ただし、疑似クラスと疑似要素は比較的抽象的で、理解するのが少し困難です。この記事は、疑似クラスと疑似要素についての私の理解です。
まず、疑似クラスと疑似要素の違いは何でしょうか?実際、これは純粋に概念的な問題であり、理解していなくても実際の使用には影響しません。しかし、CSSer にとって、コンセプトは時には基礎のようなものです。基礎が強ければ強いほど、将来的には建物も強くなります。
擬似クラスは、特定の効果を実現するために新しいクラスを追加することで既存の要素をシミュレートします。擬似要素は、特定の効果を達成するために新しい要素を追加することをシミュレートします。分かりませんか？例を見てみましょう。
疑似クラス: first-child を使用して、最初の p を赤に設定します:
p:first-child {color: red}<div> <p>第一个段落</p> //我将变成红色 <p>第二个段落</p></div> は、クラスを DOM 要素に手動で追加するのと同じです:
.first-child {color: red}<div> <p class="first-child">第一个段落</p> <p>第二个段落</p></div> 疑似要素についてはどうですか? pseudo-element::first-letter を使用して最初の文字を赤色にします:
p::first-letter {color: red}<div> <p>第一个段落</p> <p>第二个段落</p></div> 疑似要素を使用しない場合、それを実現するには追加の要素 (span など) を追加する必要があります。 :
.first-letter {color: red}<div> <p><span class="first-letter">第</span>一个段落</p> <p>第二个段落</p></div> 振り返って感じてください: 擬似クラスは、特定の効果を達成するために新しいクラスを追加することで既存の要素をシミュレートすることです。擬似要素は、特定の効果を達成するために新しい要素を追加することをシミュレートします。ここで、疑似クラスと疑似要素とは何かを見てみましょう。
擬似クラス:
動的、UI 要素のステータス、ターゲット、言語、構造、否定の 6 つのカテゴリに細分化できます。
動的擬似クラス セレクター: :リンク、:訪問、:ホバー、:アクティブ、:フォーカス。これは非常に一般的に使用されており、名前から目的が判断できるため (実際、すべての疑似クラス セレクターの目的は名前からわかります)、詳細については説明しません。基本的すぎる内容については、W3C をご自身で参照してください。
UI 要素ステータス疑似クラス セレクター: :checked、:enabled、:disabled。一般的に使用されておりシンプルなので、詳細を説明する必要はありません。
ターゲット擬似クラスセレクター: : ターゲットはアンカーポイントの # 部分を取得するために使用されます。多くのページ ジャンプの位置決めでは、a タグのアンカー ポイントを使用して位置決めします。実際、その背後にある原理は、a タグの href 属性がブラウザの location.hash を変更して、スクロール バーがある場合にページ内でジャンプできるようにすることです。 :target の機能は、ジャンプのターゲット要素を取得することです。次のようにロゴの ID を持つ div を取得できます。
<div id="logo"> …</div><a href="#logo">jump to logo</a>
言語擬似クラス セレクター: : lang は、
<html lang="en"> //可在html标签上设，也可以<body lang="en">标签里设:lang(en) { …… } //根据页面的不同的语言（如英语和法语）对不同DOM元素进行处理:lang(fr) { …… } 構造擬似クラス セレクター: :first-child、:last-child、:nth-child(n) などの lang 属性に従って要素と一致します。 :nth-last-child(n) 、:nth-of-type(n)、:nth-last-of-type(n)、:first-of-type、:last-of-type、:only-child 、:only-of-type、:root、:empty。
:first-child 名前を見れば最初の子であることがわかります。 nth-child(1) と同等。
:last-child 最後の子は名前を見ればわかります。 nth-last-child(1) と同等。
:nth-child(n) このタグは特定のタイプで、親タグの n 番目の子です。逆に、nth-last-child は最後から n 番目の子です。
:nth-of-type(n) 親タグ内の特定の型の n 番目の子。逆に、nth-last-of-type は、親タグの最後から特定の型の n 番目の子です。
2 つの疑似クラス:nth-child(n) と :nth-of-type(n) のパラメーター n は 0 から始まります。n+ など、任意の (奇妙な) 式を書くことができます。 4、-n+6、3n-2 など、結果の値が 0 以下の場合は、そのまま無視されます。もちろん、最も一般的に使用されるのは奇数の 2n+1 と偶数の 2n であるため、奇数と偶数の 2 つのキーワードがあります。それでは、それらの違いは何でしょうか？
たとえば、div の下に 2 つの p があり、2 番目の p を赤にしたい場合は、 p:nth-child(2) { color: red } と p:nth-of- を使用します。 type(2 ) { color: red } はOKです。ただし、意味は異なります。前者は、タグが p であり、親タグの 2 番目の子であることを意味します。後者は、親タグ内の 2 番目の p を表します。
ここで DOM 構造を変更します。div の下に a と 2 つの p があります。 2 番目の p を赤にしたいのですが、最初の p を変更する p:nth-child(2) { color: red; } を使用するのは間違いです (ラベルは p であり、親の 2 番目の子であるため)。要素) を赤に設定します。 p:nth-of-type(2) { color: red; } を使用して 2 番目の p を赤に設定します。
:first-of-type、:last-of-type は、親タグ内の特定の型の最初/最後の子と同じように見ることができます。 :nth-of-type(1)、:nth-last-of-type(1) と同等。
:only-child 親タグには子が 1 つだけあります。
:only-of-type 親タグ内のこのタイプの唯一の子。何の役に立つの？たとえば、div 内に img が 1 つしかない場合、その画像は浮動しません。 div 内に複数の img がある場合、それらをフローティングにして左から右に表示します。 div > img:only-of-type {…} を使用すると、div
に画像が 1 つだけある場合と複数の画像がある場合に、さまざまなレイアウトを制御できます。root はルート要素と一致し、ルートはルート要素と一致します。 HTML の要素は常に html であり、基本セレクター html
と同等です。:empty は、要素 (タグ内のスペースや改行を含む) に何もない場合に関連スタイルを適用することを意味し、ユーザーの検索結果が空であることを強調するためによく使用されます。たとえば、xx:empty {background-color: red; } の場合、div にコンテンツがない場合、背景色は赤になります。 div にコンテンツがある場合、背景色はありません。ただし、.xx::after { content: 'hello'; などの疑似要素はコンテンツとしてカウントされないことに注意してください。このとき、テキストは div に表示されますが、背景色は赤のままです。よく考えてみると、::before と ::after は実際の要素ではなく疑似要素であるため、:empty の判定には影響しません。また、擬似要素は DOM ツリーにないため、::before および ::after 擬似要素によって生成されたコンテンツを取得することはできません。
負の疑似クラス セレクター: :not、たとえば、li:not(:hover) でホバーしていないときに特定の効果を表示します。
疑似要素
は、ドキュメントに含まれるテキストを検索するために使用されますが、DOM ツリー内で検索することはできません。 ::first-line、::first-letter、::before、::after、::selection があります（CSS3 以前はコロン、CSS3 以降は疑似クラスと区別するために 2 つのコロンになります）
::first-line、::first-letter は、それぞれ最初の行と最初の文字です。
::before、::after は、要素内に 2 つの追加タグを挿入することと同じです。が最も適しており、推奨されるアプリケーションは、選択したテキストに一致するグラフィック生成
::selection (Firefox では注::-moz-selection) です。この疑似要素は、background と color の 2 つの属性のみを受け入れます