CSS擬似クラスと擬似要素の比較分析

この記事では、CSS 疑似クラスと疑似要素の比較分析について説明します。興味のある方は、この記事の内容を参照してください。

疑似クラス

疑似クラスは、原則として、HTML ドキュメントの特定の部分を選択する方法です。 HTML ドキュメント ツリー自体やその要素、名前、属性、コンテンツなどの特性に基づくのではなく、言語エンコードや要素の動的状態などの他の抽象的な条件に基づいて行われます。

元の擬似クラスは、時間の経過とともに、またはユーザーの介入を通じて出入りする要素の動的状態を定義します。 CSS2 では、この概念を拡張して、仮想概念のドキュメント コンポーネント、または最初の子などのドキュメント ツリーの推論部分を含めました。疑似クラスは、さまざまな要素にイリュージョン クラスを追加するのと同じように機能します。

制限: 疑似要素とは異なり、疑似クラスはセレクター チェーンのどこにでも出現できます。

サンプル疑似クラス コード:

a:link /* 选择未访问过的“a”元素*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* 字体颜色为黑 */
background-color : #99FF99; /* 设置为淡绿色*/
border-top : 2px solid #ccffcc; /* highlight color */
border-left : 2px solid #ccffcc; /* highlight color */
border-bottom : 2px solid #003300; /* shadow color */
border-right : 2px solid #003300; /* shadow color */
}
a:visited /* 这将选择任何已访问其目标的“a”元素。*/
{ padding : 4px;
text-decoration : none;
color : #000000; /* black text color */
background-color : #ccccff; /* set to a lavender */
border-top : 2px solid #ffffff; /* highlight color */
border-left : 2px solid #ffffff; /* highlight color */
border-bottom : 2px solid #333366; /* shadow color *
border-right : 2px solid #333366; /* shadow color */
}
a:hover /* 这将选择处于悬停状态的任何“a”元素。这是指针在元素的渲染区域内移动期间的状态。用户指定元素但不激活它。 */
{
color : #000000; /* black text color */
background-color : #99cc99; /* desaturated color */
border-top : 2px solid #003300; /* shadow color */
border-left : 2px solid #003300; /* shadow color */
border-bottom : 2px solid #ccffcc; /* highlight color */
border-right : 2px solid #ccffcc; /* highlight color */
}
a:focus /* 这将选择当前具有焦点的任何“a”元素。焦点是元素接受键盘输入或其他形式的文本输入的状态。 */
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ffff99; /* set to a pastel yellow */
border-top : 2px solid #ffffcc; /* highlight color */
border-left : 2px solid #ffffcc; /* highlight color */
border-bottom : 2px solid #666633; /* shadow color */
border-right : 2px solid #666633; /* shadow color */
}
a:active /*这将选择处于激活状态的任何“a”元素。活动是指针激活期间的状态（例如：按下并释放鼠标）在元素的渲染区域内*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ff99ff; /* set to a pink */
border-top : 2px solid #ffccff; /* highlight color */
border-left : 2px solid #ffccff; /* highlight color */
border-bottom : 2px solid #663366; /* shadow color */
border-right : 2px solid #663366; /* shadow color */
}

疑似要素

疑似要素は、要素のサブパートを処理するために使用されます。これらを使用すると、ドキュメントで指定されている内容を超えて、要素のコンテンツの一部にスタイルを設定できます。言い換えれば、実際には文書要素ツリーにない論理要素を定義できるようになります。論理要素を使用すると、CSS セレクターで暗黙的なセマンティック構造を処理できます。

制限事項: 疑似要素は外部およびドキュメントレベルのコンテキストにのみ適用できます。インライン スタイルには適用できません。疑似要素は、ルール内で出現できる場所に制限されます。これらはセレクター チェーンの最後 (セレクターの件名の後) にのみ表示されます。これらは、セレクター内で見つかったクラス名または ID 名の後に表示される必要があります。セレクターごとに指定できる擬似要素は 1 つだけです。単一の要素構造で複数の疑似要素を処理するには、複数のスタイル セレクター/宣言ステートメントを作成する必要があります。

疑似要素は、イニシャル キャップやドロップ キャップなどの一般的なタイポグラフィ効果に使用できます。ソースドキュメントに存在しない生成されたコンテンツも処理できます (「前」と「後」を使用)。以下は、属性と値が追加されたいくつかの疑似要素を含むスタイルシートの例です。

rree

以上がCSS擬似クラスと擬似要素の比較分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。