疑似クラスと疑似要素の使用の概要
css 疑似クラスと疑似要素
line-height (行の高さの公式定義: テキストのベースラインを 2 行揃える)
(ビデオチュートリアルの推奨: css ビデオチュートリアル)
ターゲット疑似クラス
:link (a:link 未访问的链接 浏览器有缓存!!所以刷新没用) a:active{color: ;} :active (长按住) :visited (已经访问的链接) :hover (鼠标放上去) :focus (获取用户焦点)
疑似要素 (幅と高さを設定できないインライン要素です)
::after (在元素后面添加内容) ::before (在元素前面添加内容) display:... inline-block(能够设置高度,和行内元素并排显示) inline block(独占一行) none(隐藏
cssプロパティ
继承(一个元素如果没有设置某个属性的值,那么就会跟随父属性的值。如果设置了,就用自己的值) color ,font-size line-height text-align 层叠(后面的样式会覆盖前面的样式) 当选择器相同时 后面的选择器会覆盖前面的 当选择器不同时,根据选择器的权重设置
List
ul(无序列表) ol (有序列表)
Table
table tr单元行 td单元格 boder 边框 cellpadding 单元格内部的间距 cellspacing 单元格之间的距离 width 表格的宽度 align 表格的水平对齐方式
Css要素の型分け(要素を1行で表示できるかどうかによる) )
块级元素 (独占父元素的一行) 常用的块级元素 ● div ● p ● h1-h6 ● ul--li ● table ● from
インライン レベルの要素 (他のインライン要素と同じ行に表示できます)
● img ● span ● a ● inupt
関連する推奨事項: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)

ホットトピック









疑似要素が失敗する理由: 1. セレクターの問題、2. スタイルの競合、3. 継承の問題、4. 構文エラー、5. ブラウザーの互換性の問題など。詳細な紹介: 1. セレクターの問題、疑似要素のセレクターが正しくないため、ターゲット要素が選択されない可能性があります; 2. スタイルの競合、CSS でスタイルの競合がある場合、疑似要素が無効になる可能性があります; 3.継承の問題、疑似要素が特定のスタイル属性を継承しない可能性がある; 4. 構文エラー CSS に構文エラーがある場合、疑似要素が失敗する可能性がある; 5. ブラウザの互換性の問題など。

:nth-child(n+3) 擬似クラス セレクターを使用して、位置が 3 以上の子要素のスタイルを選択します。具体的なコード例は次のとおりです。 HTML コード: <divid="container" ><divclass="item"> ;最初の子要素</div><divclass="item"&

CSS::placeholder 疑似要素セレクターの複数のアプリケーション シナリオを実装するには、特定のコード サンプルが必要です。Web 開発では、CSS は、Web ページのレイアウトとスタイルを制御するために一般的に使用されるスタイル シート言語です。 ::placeholder 疑似要素セレクターは、CSS3 の新しいセレクターであり、入力ボックス (テキスト入力ボックス、パスワード入力ボックスなどを含む) のプレースホルダー スタイルを変更するために使用されます。以下では、さまざまなアプリケーション シナリオを紹介し、対応するコード例を示します。入力ボックスのプレースホルダーの色を変更します。

Hover は擬似要素ではなく、擬似クラスです。疑似クラスは要素の特定の状態や動作を選択するために使用され、疑似要素は要素の特定の部分にスタイルを追加するために使用されます。 :hover は、要素の特定の部分にスタイルを追加するのではなく、要素の特定の状態を選択するために使用されるため、:hover 疑似クラスを使用して要素のマウスオーバー状態のスタイルを設定することができます。また、:hover を使用することもできます。リンクにホバー効果を追加する疑似クラス。リンク上にマウスを置くと、リンクの色、背景色などが変化します。

前回の記事「Css擬似セレクターの学習 - 擬似要素セレクターの解析」では擬似要素セレクターについて学習しましたが、今回は擬似クラスセレクターについて詳しく見ていきます。

:active 疑似クラス セレクターを使用してマウス クリック効果を実現する CSS スタイル CSS は、Web ページのパフォーマンスとスタイルを記述するために使用されるカスケード スタイル シート言語です。 :active は CSS の疑似クラス セレクターで、マウスをクリックしたときに要素の状態を選択するために使用されます。 :active 擬似クラス セレクターを使用すると、クリックされた要素に特定のスタイルを追加して、マウス クリック効果を実現できます。以下は、:active 疑似クラス セレクターを使用してマウス クリック効果を実現する方法を示す簡単なサンプル コードです。

擬似要素は、装飾効果の作成、特定のレイアウト効果の実現、インタラクティブ効果の作成、特定の要素の状態の変更、およびいくつかの特殊効果の作成に使用できます。詳細な紹介: 1. 装飾効果の作成:before または :after 擬似要素のコンテンツ属性とスタイルを設定することで、要素の前後にアイコン、図形、その他の装飾要素を挿入して、さらに要素を追加できます。 Web ページへの視覚的なアピールとパーソナライゼーション 2. :before および :after 擬似要素などを通じて作成できる、特定のレイアウト効果を実現します。

CSS 疑似クラスと疑似要素の基本概念と応用シナリオを理解します。CSS (CascadingStyleSheets) は、Web ページのスタイルを記述するために使用されるマークアップ言語です。Web ページ内の要素の外観とレイアウトを制御できます。 CSS では、疑似クラスと疑似要素は、CSS の適用範囲と柔軟性をさらに拡張できる非常に便利な機能です。 1. 擬似クラス 擬似クラスは、特定の状態要素を選択するために使用されるキーワードです。一般的な疑似クラスには、ホバー、アクティブ、フォーカスなどが含まれます。以下に一般的なものをいくつか示します
