疑似クラスと疑似要素の違い
(1) クラス、ユーザー定義のクラス名。このクラスは、div.div0 など、クラス div0 の div 要素を選択します。
(2) 擬似クラス。特定のセレクターに特殊効果を追加するために使用されます。疑似クラスで定義されたスタイルは、マークには作用しませんが、a タグの :hover や form 要素の :disabled などのマークの状態に作用します。
(3) div、p、h1 などの要素は実数要素です。
(4) 疑似要素は、HTML には存在せず、CSS でのレンダリングにのみ使用される要素です。このコンテナには DOM 要素は含まれませんが、コンテンツを含めることができます。 ::前、::後など。
疑似クラスセレクター
疑似クラスの目的は、セレクターを使用して、DOM ツリーに存在せず、通常の CSS セレクターでは取得できない情報を検索することです。疑似クラスは通常、「状態」を表します。疑似クラスはコロンで始まり、その後に疑似クラスの名前と括弧で囲まれたオプションのパラメータが続きます。
アンカー擬似クラス
タグの 4 つの状態を設定する場合、順序は LVHA、つまり link、:visited、:hover、:active である必要があります。
通常の状況では、a タグのデフォルトの効果と、マウスを横切る効果、a{}、a:hover{} を設定するだけで済みます。
ターゲット疑似クラスセレクター
:target ハイパーリンク後のターゲット スタイル。 ハイパーリンクを使用する場合、ターゲット セレクターでリンクのターゲットを設定できます。ターゲットがジャンプされた後にのみ、対応するスタイルが表示されます。
a タグの href 属性の値は、リンク アドレス、タグの ID、または a タグの名前を指すことができます。
<style>:target{font-size:20pt;border:1pxsolidgray;}div:target{background-color:#ccc;}</style><p><ahref=#news1>ボタン 1</a></ p><p><ahref=#news2>ボタン 2</a></p><aname=news1>コンテンツ 1</a><divid=news2>コンテンツ 2</div>ボタン 2 をクリックすると、結果が表示されます。
フォーム要素の擬似クラスセレクター
:in-range は、入力要素の min 属性や max 属性など、間隔値を指定できる要素に対してのみ機能します。
:invalid は、input 要素の min および max 属性、正しい電子メール フィールド、有効な数値フィールドなど、間隔値を指定できる要素に対してのみ機能します。
構造擬似クラスセレクター
<style>p:first-child{color:red;}/*最初の要素は h1 なので選択されていません*/p:first-of-type{color:blue;}p:nth-child(4) { color:green;}/*4 番目の要素は sp ですつまり、選択されていません*/p:nth-of-type(4){color:pink;}p:only-child{color: yellow;}/*7 番目の p が選択されていますが、スタイルは上書きされます* / p:only-of-type{color:orange;}/ *7 番目と 8 番目の p が選択されています*/</style><h1>タイトル 1</h1><p>1 番目の p</p><p>2 番目の p</p><span >本文の内容</ span><p>3 番目の p</p><p>4 番目の p</p><p><i>テキスト コンテンツ</i>5 番目の p</p> <p>6 番目の p</p><h5>タイトル 5</h5><div><p>7 番目の p</p></div><div><p>8 番目の p</p> p ><span>テキストコンテンツ</span></div><div><p>9 番目の p</p><p>10 番目の p</p></div>実行結果:
疑似クラスセレクターを否定する
擬似要素
擬似要素は、DOM ツリー内にいくつかの抽象要素を作成します。これらの抽象要素は、ドキュメント言語 (HTML ソース コードとして理解できます) には存在しません。たとえば、ドキュメント インターフェイスは要素コンテンツの最初の単語または行にアクセスするメカニズムを提供しませんが、開発者は疑似要素を使用してこの情報を抽出できます。さらに、一部の疑似要素により、開発者はソース ドキュメントに存在しないコンテンツを取得できます。擬似要素は 2 つのコロン:: で始まり、その後に擬似要素の名前が続きます。
簡単に言うと、擬似要素は、DOM 要素を含まないが、コンテンツを含めることができる仮想コンテナを作成します。
CSS3の擬似要素セレクターとCSS2の擬似クラスセレクターは前後が全く同じです。
存在する疑似要素は次のとおりです。
content 属性は、生成されたコンテンツを挿入するために、:before および :after 疑似要素とともに使用されます。疑似クラス + 疑似要素を使用できます。
CSS スタイルの重み
CSS の優先順位ルール:
(1) CSS 選択ルールの重み値が異なる場合、重み値が大きい方が優先されます。
(2) CSS 選択ルールの重み値が同じ場合、後から定義されたルールが優先されます。
(3) CSS 属性の後に !importand を追加した場合は、無条件で絶対優先されます。
重量値の計算: