擬似要素と擬似クラス ところで、まずは疑似クラスセレクターと疑似要素セレクターについておさらいしておきましょう。古いブラウザでは、以下の 2 つの書き方は厳密に区別されていませんでした。 a:後{} a::after{} 新しい標準では、CSS3 疑似クラスにはシングルコロン (:) が使用され、CSS3 疑似要素にはダブルコロン (::) が使用されます。開発中はこれに注意する必要があります。もちろん、ほとんどのブラウザは両方の記述方法を認識できます。 一般的な疑似要素と疑似クラス 擬似クラス
疑似クラスは、通常、マウスのホバー、ボタンのクリック、リンクの訪問、入力ボックスのフォーカスなど、要素の特定の状態に使用されます。また、複数の要素の最初、最後、偶数、奇数などの特別な要素を選択する場合にも使用されます。その機能は、上記の条件を満たす要素にいくつかのスタイルを追加することです。 ホバー{ テキスト装飾: 下線; } a:アクティブ{ 色: 青; } リンク 色: 赤; } a:訪問{ 色: 緑; } 上記の例は、さまざまな状態の 擬似要素
コンテンツ モジュールで説明したように、「content」属性が設定されていない場合、疑似要素は役に立ちません。疑似要素を使用して挿入されたコンテンツは、ページのソース コードには表示されず、CSS にのみ表示されます。挿入された要素は、デフォルトではインライン要素(または HTML5 ではテキスト セマンティック クラス)になります。したがって、挿入された要素に高さ、パディング、マージンなどを指定するには、通常、それをブロックレベル要素として明示的に定義する必要があります。また、挿入された要素には一般的な CSS 継承ルールが適用されることに注意してください。たとえば、Helvetica、Arial、Sans Serif のフォント ファミリを body 要素に適用すると、疑似要素は他の要素と同様にそのフォント ファミリを継承します。疑似要素は、親要素からスタイル (パディング マージンなど) を自然に継承しません。直感的には、:before および :after 疑似要素は、挿入されたコンテンツがターゲット要素の前または後に挿入されることを意味していると考えられます。そうではありません。挿入されたコンテンツは、関連付けられたターゲット要素の子になりますが、その要素のコンテンツの「前」または「後」に配置されます。 <ヘッド> <スタイル タイプ="text/css"> p.box::before { コンテンツ: "#"; 境界線: 実線 1px 黒; パディング: 2px; マージン: 0 10px 0 0; } p.box::after { コンテンツ: "#"; 境界線: 実線 1px 黒; パディング: 2px; マージン: 0 10px 0 0; } </スタイル> </head> <本文> <p class="box">その他のコンテンツ。</p> </本文> 操作効果: ご覧のとおり、 マジック擬似クラス: focus-within 話題に戻り、主役の このプロパティは、フォーカス可能な要素から始まり、トリガー <html> <div class="box g-father"> <div class="box g-children"> <div class="box button" tabindex="1">ボタン</div> </div> </div> <div class="g-body">HTML</div> <スタイル> div { ボックスのサイズ: 境界線ボックス; } .button,.g-children { 幅: 100%; 高さ: 100%; パディング: 20px; 境界線: 1px 実線; } .g-父{ 幅: 200ピクセル; 高さ: 200px; パディング: 20px; 境界線: 1px 実線; } .g-ボディ{ 上マージン: 20px; 幅: 200ピクセル; 境界線: 1px 実線; } .g-body:フォーカス内{ 背景色: #5daf34; } .g-father:focus-within { 背景色: #3a8ee6; } .g-children:focus-within{ 背景色: #2c3e50; } .button:focus-within { 背景色: #606266; 色: 赤; } </スタイル> </html> 実行結果: ユーザーの焦点領域を感知
<html> <div class="g-container"> <input type="text" placeholder="ユーザー名" class="g_input" > <input type="text" placeholder="code" class="g_input" > </div> <スタイル> .g-コンテナ{ 上マージン: 10vh; } .g-コンテナ{ パディング: 10px; 幅: 30vw; 境界線: 1px 実線 #eee; 遷移: すべて .3; テキスト配置: 中央; } .g-コンテナ:フォーカス内{ 変換: translateY(-4px); ボックスシャドウ: 0 0 10px #ddd; 境界線の色: hsl(199, 98%, 48%); } .g_入力{ 境界線: なし; 幅: 20vw; パディング: 15px; フォントサイズ: 18px; ボックスのサイズ: 境界線ボックス; 境界線: 1px 実線 #ddd; オーバーフロー: 非表示; 遷移: 0.3秒; ボックスシャドウ: 0 0 0px #ddd; &:集中 { ボックスシャドウ: 0 0 10px #ddd; 境界線の色: hsl(199, 98%, 48%); } } </スタイル> </html>
オフスクリーンナビゲーションを実装する まずは効果を見てみましょう: これは優れたナビゲーション効果であり、実装全体で B StationやNuggetsなどのウェブサイトのログインアニメーション切り替えを実装する ユーザーが Bilibili や Nuggets でパスワードを入力するとき、上の画像では目を覆っていることに気づいたかもしれません。ここでも <html> <div class="g-wrap"></div> <div class="g-container"> <h2>ログイン</h2> <div class="g-ユーザー名"> <input maxlength="64" placeholder="電話番号またはメールアドレスを入力してください" class="input"> <img src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png" class="g-username"> </div> <div class="g-password"> <input type="password" maxlength="64" placeholder="パスワードを入力してください" class="input"> <img src="https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png" class="g-password"> </div> <img src="https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png" class="g-normal"> </div> <スタイル> .g-ラップ{ 位置: 固定; 上: 0; 左: 0; 下部: 0; 右: 0; 背景: rgba(0, 0, 0, 0.3); } .g-コンテナ{ 位置: 相対的; 幅: 318ピクセル; マージン: 100px 自動; 高さ: 370ピクセル; パディング: 20px; ボックスのサイズ: 境界線ボックス; 背景: #fff; zインデックス: 10; } .g-コンテナ h2 { フォントサイズ: 20px; フォントの太さ: 太字; 下部マージン: 30px; } .g-コンテナ入力{ アウトライン: なし; パディング: 10px; 幅: 100%; 境界線: 1px 実線 #e9e9e9; 境界線の半径: 2px; アウトライン: なし; ボックスのサイズ: 境界線ボックス; フォントサイズ: 16px; } 画像 { 位置: 絶対; 上限: -20%; 左: 50%; 幅: 120ピクセル; 高さ: 95px; 変換: translate(-50%, 0); } .g-ユーザー名{ 下マージン: 10px; } .g-ユーザー名img { 表示: なし; 幅: 120ピクセル; 高さ: 113px; } .g-ユーザー名:フォーカス内 ~ img { 表示: なし; } .g-ユーザー名:入力内のフォーカス{ 境界線の色: #007fff; } .g-ユーザー名:フォーカス内画像 { 表示: ブロック; } .g-パスワード{ 下マージン: 10px; } .g-パスワード画像{ 表示: なし; 幅: 103px; 高さ: 84px; 上限: -15%; } .g-password:focus-within ~ img { 表示: なし; } .g-password:入力内にフォーカス { 境界線の色: #007fff; } .g-password:フォーカス内画像{ 表示: ブロック; } </スタイル> </html> フォーカス内の互換性 CSS3 の新機能には常に互換性の問題があったため、ここで互換性を確認したところ、赤い領域はそれほど悪くないことがわかりました。IE を除いて、他のブラウザは基本的にサポートしています。 すべてのソースコードは私のリポジトリにあります: CSS3 の focus-within セレクターの使い方についてはこれで終わりです。CSS3 の focus-within セレクターについてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: ネイティブ JavaScript でオブジェクトが空かどうかをチェックする実装例
>>: ページキャッシュを無効にするいくつかの方法を共有する
XML/HTML コードコンテンツをクリップボードにコピー<ボタンスタイル= "カ...
目次fileReader に関する落とし穴iOS における FileReader の落とし穴 (イメ...
目次序文1. 理由: 2. 解決策のアイデア: 1. ローカル保存方法: 2. 実装手順: 3. 最...
目次1. 解体のヒント2. デジタルセパレーター3. try...catch...finally が...
文字列関数文字ascii(str)のASCIIコード値をチェックし、strが空の文字列の場合は0を返...
async_hooks モジュールは、Node.js バージョン 8.0.0 に正式に追加された実験...
目次導入建築ESXIの利点vSphere とは何ですか? 2. 仮想マシンの利点3. 仮想マシンを使...
目次I. 概要2. pt-archiverの主なパラメータ3. mysql_archiverのインス...
序文開発プロセスでは、10 進データ型がよく使用されます。 MySQL では、小数点は正確なデータ型...
CSSでtext-align、margin: 0 autoを使用して中央揃えにするtext-alig...
CentOS6.9はMysql5.7をインストールします。参考までに、詳細は次のとおりです。 1. ...
最新の HTML 標準には、レイアウトを計算するために使用できる calc CSS 式があります。し...
通常、すべての Web サイトは、多くの非検索エンジン クローラーに遭遇します。これらのクローラーの...
目次1. インストールパッケージ(64ビット)をダウンロードする2. MySQLデータベースをインス...
ページディレクトリ構造 デフォルトの HTML テンプレート ファイル public/index.h...