CSS 疑似要素と疑似クラスの魔法のような使い方についての簡単な説明

CSS は Web ページで非常に重要な役割を果たします。近年の CSS の発展に伴い、疑似要素/疑似クラスも広く使用されるようになりました。パフォーマンスがますます重要になる中、ドキュメント フローの外側にある CSS 疑似要素/疑似クラスは、まさに「無冠の王」です。

ここでは、著者がまとめた CSS に関する「セクシーな操作」をいくつか紹介します。皆さんのお役に立てば幸いです。

:hover と :focus はフローティングレイヤーを表示します

CSS 親子セレクター (「親子ネスト」用)/兄弟セレクター (「同一レベルの並列配置」用) + 疑似クラス:hoverのみを使用して、[マウスがスライドインすると xxx を表示する] を JS を使用せずに完全に実現できます。例えば、マウスをリンクの上に置くと画像が表示されます

<a href="javascript:;">画像リンク</a>
<img src="xxx" alt="" />

画像{
      可視性: 非表示;
      位置: 絶対;
      transition: visibility .2s; /** 遅延を設定する **/
}
a:ホバー+画像、
画像:ホバー{
  可視性: 可視;
}

最後に、画像がリンク表示を覆ってしまうのを防ぐために、マウスを画像の上に移動しても画像が表示され続けるようにimg:hover追加します。

しかし、マウス環境がない場合、これは「失敗」します。例: モバイル端末やスマートデバイス。エクスペリエンスを最適化するために、img に疑似クラス:focusを追加できます - フォーカス状態:

a:フォーカス + 画像、
フォーカス
	可視性: 可視;
	遷移: なし;
}

:フォーカス:ホバー

実際には、ドロップダウン リストにあります。 CSS だけを使用している場合は、「親子関係のない並列要素」の使用はお勧めしません。問題はフォーカスにあります: :focus現在の要素がフォーカスされた状態にある場合にのみ一致します。さて、この問題を簡単に解決するには、このエフェクトに対して上記の遷移遅延を設定するなど、一連の解決策が必要です。しかし、実際には、これはまだ「問題ではありません」。ブラウザが新しい仕様:focus-withinサポートしているためです。この仕様では、「現在の要素または現在の要素の任意の子要素にフォーカスがある場合に一致する」と規定されています。本質的には「親セレクタの動作」です。

<div class="y-table">
     <a href="javascript:;" class="y-msg">私のメッセージ</a>
     <div class="cs-list">
          <a href="javascript:;">私の回答</a>
          <a href="javascript:;">私のプライベートメッセージ</a>
          <a href="javascript:;">私の注文</a>
          <a href="javascript:;">私のフォロー</a>
          <a href="javascript:;">お気に入り</a>
      </div>
</div>

:フォーカス内

:not() は表示要素を決定します

Webページ上の[検索]ボタンでは、入力したキーワードに基づいてリストが表示されるシナリオがあります。著者はかつて、シナリオを説明するために JavaScript を使用した記事を書きました: (JavaScript) Baidu/Google 検索のインスタント自動補完機能はどのように「機能」するのでしょうか?

実際、CSS :not()を使用して表示を最適化することもできます。つまり、条件を満たす情報が xxx ではないかどうかを判断するのです。

.list:not([class="show"]) { 表示: なし; }

CSS3 セレクターには、属性セレクターと呼ばれるものがあり、次のような使い方をします: [attr](有該屬性) 、 [attr=xxx](屬性值是xxx) 、 [attr^=xxx](屬性值是xxx開頭) 、 [attr$=xxx](屬性值以xxx結尾) 、 [attr*=xxx](屬性值包含xxx) 。

次に、フィルタリング時に、条件を満たしているかどうかに基づいて、返されたリストの一部の項目に表示クラス名を動的に追加します。 「カスタム データ属性」を使用することもできます。

：ない

ボタンをクリックすると菊の写真が表示されます

一般的な使用シナリオについてお話ししましょう。フォームで送信ボタンをクリックしたときに、ユーザーが「より多くのフィードバック効果」を見ることができれば、Web ページの人気が高まると思われます。したがって、「フォームを送信」するときに、ユーザーに待機中であることを知らせるのが良いようです。

JavaScript を通じてクラス名を制御し、クリック時にボタンに loading-name を追加し、テキストを透明にして、背景を読み込み中の画像に設定します。

「クリック」を見たら、「疑似クラス: focus」や「疑似クラス: active」をちょっと考えて、書き直してみてほしいと思います。

:active は「データレポート」を実装します

実際、Web ページには小さな問題があります。ユーザーが JavaScript を無効にした場合、またはブラウザーが JavaScript をサポートしていない場合はどうなるでしょうか?もちろん、後者の状況は現在では基本的に発生していませんが、これは確かに厄介な問題であり、多くのフロントエンド開発者がそれに取り組んでいます。

この問題は、著者の他の記事でも言及されています。ここでは、「データ レポート」についてのみ説明します。フォームがなく、JavaScript がサポートされていない場合 (ajax を使用できない場合)、データをバックエンドに渡すにはどうすればよいでしょうか。幸いなことに、クリック状態を表す疑似クラス:activeがあります。元々は のみをサポートしていましたが、現在はすべての HTML タグをサポートしています。しかし、あなたはこう尋ねるかもしれません: この疑似クラスは通常、リンクの色などを変更するためにのみ使用されるのではないですか?もちろんこの要素だけでは十分ではないのですが、定番のデモ【クリック数を判断する】を考えたことがあるでしょうか！

通常、active と after を一緒に使用します。

信じられないかもしれませんが、サーバーにリクエストを送信してデータをアップロードします。

ここで URL を使用するのはなぜですか?画像形式を使用しない場合は、after-contentの文字列形式で固定値のみ書き込むことができます。

::after と ::before のシナリオ

疑似要素/疑似クラスの「リーダー」として、どうして「後」と「前」について話さずにはいられないのでしょうか?これらは非常に多くのシナリオで使用されます。一般的な「単語間の '|' 記号」、「単語の前後の水平線」、「いくつかの特殊なパターン、さらには組み合わせたパターン」などで見られます。

「検索アイコン」スタイルの実装

純粋な CSS で実装されたクールな「読み込み」

CSS 疑似要素と疑似クラスの素晴らしい使い方を紹介したこの記事はこれで終わりです。CSS 疑似要素と疑似クラスに関するより詳しい情報は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。