CSSで疑似クラスと疑似要素を使用する方法
疑似クラスは、link や hover などのメソッドを通じてセレクターに特殊効果を追加できます。疑似要素は、: first-line を通じて最初の行のスタイルを追加し、: first を通じて最初の文字を追加できます。この 2 つの側面については、後で詳しく説明します。
疑似クラス
特定の部分を選択する方法です。ユーザー介入によって出入りするときの要素の動的な状態は、原則として HTML ドキュメント ツリー自体とその要素または属性に属さないことを示します。実際には、CSS 疑似クラスが使用されます。セレクター、 および擬似の特殊効果を追加します。さまざまな要素、擬似クラスはセレクター チェーンのどこにでも出現できます。
例
a: リンクは未訪問のリンクを表します
<style>
a:link{
background-color: pink;
}
a: visit は訪問済みのリンクを表します
a:visited{
background-color: pink;
}
a: マウスを移動するとホバーします リンク時
a:hover{
background-color: pink;
}
a: active: 選択されたリンクを示します
a:hover{
background-color: pink;
}
a:active{
background-color: pink;
}
疑似要素
疑似要素は、特定のセレクターに特殊効果を設定するために使用され、外部およびドキュメント レベルにのみ適用できます。インラインスタイルの代わりに。これらはセレクター チェーンの最後にのみ表示され、各セレクターは 1 つの疑似要素のみを指定できます。単一の要素構造で複数の擬似要素を処理するには、複数のスタイル セレクターまたは宣言ステートメントを作成する必要があります。: 最初の行の擬似要素
は、テキストの最初の行に特別なスタイルを設定するために使用され、ブロックレベルの要素にのみ使用できます 変更可能 次の属性のフォント、色、背景、単語間隔、文字間隔など。p:first-line
{
color: pink;
font-variant: small-caps;/*改为大写*/
}
</style>
</head>
<body>
<p>
you are very good!
</p>
: 最初の文字の擬似要素
は、テキストの最初の文字に特別なスタイルを設定するために使用されます: は、フォント、色、背景、マージン、パディング、境界線、およびその他の属性を変更できます。p:first-letter
{
color: pink;
font-variant: small-caps;/*改为大写*/
}
</style>
</head>
<body>
<p>
you are very good!
以上がCSSで疑似クラスと疑似要素を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7485
15
1377
52
77
11
19
38
なぜ疑似要素が失敗するのでしょうか?
Nov 21, 2023 pm 05:13 PM
疑似要素が失敗する理由: 1. セレクターの問題、2. スタイルの競合、3. 継承の問題、4. 構文エラー、5. ブラウザーの互換性の問題など。詳細な紹介: 1. セレクターの問題、疑似要素のセレクターが正しくないため、ターゲット要素が選択されない可能性があります; 2. スタイルの競合、CSS でスタイルの競合がある場合、疑似要素が無効になる可能性があります; 3.継承の問題、疑似要素が特定のスタイル属性を継承しない可能性がある; 4. 構文エラー CSS に構文エラーがある場合、疑似要素が失敗する可能性がある; 5. ブラウザの互換性の問題など。
:nth-child(n+3) 擬似クラス セレクターを使用して、位置が 3 以上の子要素のスタイルを選択します。
Nov 20, 2023 am 11:20 AM
:nth-child(n+3) 擬似クラス セレクターを使用して、位置が 3 以上の子要素のスタイルを選択します。具体的なコード例は次のとおりです。 HTML コード: <divid="container" ><divclass="item"> ;最初の子要素</div><divclass="item"&
CSS::placeholder疑似要素セレクターのさまざまなアプリケーションシナリオを実装する
Nov 20, 2023 pm 03:17 PM
CSS::placeholder 疑似要素セレクターの複数のアプリケーション シナリオを実装するには、特定のコード サンプルが必要です。Web 開発では、CSS は、Web ページのレイアウトとスタイルを制御するために一般的に使用されるスタイル シート言語です。 ::placeholder 疑似要素セレクターは、CSS3 の新しいセレクターであり、入力ボックス (テキスト入力ボックス、パスワード入力ボックスなどを含む) のプレースホルダー スタイルを変更するために使用されます。以下では、さまざまなアプリケーション シナリオを紹介し、対応するコード例を示します。入力ボックスのプレースホルダーの色を変更します。
css擬似セレクター学習擬似クラスセレクター解析
Aug 03, 2022 am 11:26 AM
前回の記事「Css擬似セレクターの学習 - 擬似要素セレクターの解析」では擬似要素セレクターについて学習しましたが、今回は擬似クラスセレクターについて詳しく見ていきます。
なぜホバーは擬似要素なのでしょうか?
Oct 09, 2023 pm 05:45 PM
Hover は擬似要素ではなく、擬似クラスです。疑似クラスは要素の特定の状態や動作を選択するために使用され、疑似要素は要素の特定の部分にスタイルを追加するために使用されます。 :hover は、要素の特定の部分にスタイルを追加するのではなく、要素の特定の状態を選択するために使用されるため、:hover 疑似クラスを使用して要素のマウスオーバー状態のスタイルを設定することができます。また、:hover を使用することもできます。リンクにホバー効果を追加する疑似クラス。リンク上にマウスを置くと、リンクの色、背景色などが変化します。
:active 擬似クラス セレクターを使用して、マウス クリック効果の CSS スタイルを実装します。
Nov 20, 2023 am 09:26 AM
:active 疑似クラス セレクターを使用してマウス クリック効果を実現する CSS スタイル CSS は、Web ページのパフォーマンスとスタイルを記述するために使用されるカスケード スタイル シート言語です。 :active は CSS の疑似クラス セレクターで、マウスをクリックしたときに要素の状態を選択するために使用されます。 :active 擬似クラス セレクターを使用すると、クリックされた要素に特定のスタイルを追加して、マウス クリック効果を実現できます。以下は、:active 疑似クラス セレクターを使用してマウス クリック効果を実現する方法を示す簡単なサンプル コードです。
CSS 疑似クラスと疑似要素の基本概念と使用シナリオを調べる
Dec 23, 2023 pm 01:21 PM
CSS 疑似クラスと疑似要素の基本概念と応用シナリオを理解します。CSS (CascadingStyleSheets) は、Web ページのスタイルを記述するために使用されるマークアップ言語です。Web ページ内の要素の外観とレイアウトを制御できます。 CSS では、疑似クラスと疑似要素は、CSS の適用範囲と柔軟性をさらに拡張できる非常に便利な機能です。 1. 擬似クラス 擬似クラスは、特定の状態要素を選択するために使用されるキーワードです。一般的な疑似クラスには、ホバー、アクティブ、フォーカスなどが含まれます。以下に一般的なものをいくつか示します
疑似要素を追加すると何の役に立つのでしょうか?
Oct 09, 2023 pm 05:45 PM
擬似要素は、装飾効果の作成、特定のレイアウト効果の実現、インタラクティブ効果の作成、特定の要素の状態の変更、およびいくつかの特殊効果の作成に使用できます。詳細な紹介: 1. 装飾効果の作成:before または :after 擬似要素のコンテンツ属性とスタイルを設定することで、要素の前後にアイコン、図形、その他の装飾要素を挿入して、さらに要素を追加できます。 Web ページへの視覚的なアピールとパーソナライゼーション 2. :before および :after 擬似要素などを通じて作成できる、特定のレイアウト効果を実現します。
