CSS の一般的な問題を 1 か所にまとめ_html/css_WEB-ITnose-htmlチュートリアル-php.cn

一般的な CSS の問題をすべて理解します

疑似クラスと疑似要素

疑似クラス

疑似クラスとは何ですか? クラスはクラスではありません、それ自体で宣言されたクラスでもありません (スタイルを記述せずに存在することもあります)。

疑似要素の理解は初期段階です。 Web ページ上のリンク (アンカー) は、クリックすると紫色になり、マウスを置くと色が変わります。 .1 は、ハイパーリンク (href 属性を持つ) にのみ適用される 2 つを定義します。

疑似クラス名の説明

:link

:visited 疑似-クラス名説明

は、すべてのアンカーを示します。ハイパーリンク (href) を作成し、未訪問アドレスを指します (すべてのアンカーが未訪問であるわけではありませんが、一部のブラウザではこれができないことに注意してください)	訪問済みのすべてのアンカーを示します
動的疑似クラス

: focus

現在フォーカスがある要素(タブで切り替え可能)、入力を受け付ける、またはアクティブ化できる要素その他要素の最初の子要素を選択するための静的疑似クラス: first_chilid

:hover	マウスが留まっている要素(そうではない)ハイパーリンクに限定)
:active	入力またはアクティブ化された要素を示します (ハイパーリンクに限定されません)
動的疑似クラスは任意の要素に適用でき、非リンクスタイルのアプリケーションに役立ちます	最初の子要素を選択します

<div>

ログイン後にコピー

</div>

 <p></p>

ログイン後にコピー

</div>

 <ul>

ログイン後にコピー

</div>

 <li href='abc'></li>

ログイン後にコピー

</div>

 <li></li>

ログイン後にコピー

</div>

 </ul>

ログイン後にコピー

</div>

div:first_child 最初の子要素は

ul :first_child の最初の子要素は

疑似クラスと組み合わせる

CSS2.1 では、疑似クラスは次のことができます同じセレクターと組み合わせることができます。

</div>

ログイン後にコピー

</div>

a:link:hover { }

ログイン後にコピー

</div>

a:visited:hover { }

ログイン後にコピー

</div>

順序は重要ではありません、効果は同じです。

疑似要素

疑似要素セレクター

疑似クラスがアンカーのファントムクラスを指定するのと同じように、疑似-要素はドキュメント内に架空の要素を入力できます。このようにして、CSS2.1 で 4 つの疑似要素が作成され、最初の文字スタイル (:first-letter) を設定し、最初の行 (:first-line) を設定します。前の設定 (:before)、後の設定 (:after)