ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS3セレクタに関する研究、事例

CSS3セレクタに関する研究、事例

WBOY
リリース: 2016-09-20 03:30:01
オリジナル
1418 人が閲覧しました

前回の CSS3 セレクターの考察の記事では、ほとんどすべての CSS3 セレクターと疑似クラス セレクターがリストされていましたが、その記事ではそれを書きたかったのですが、ケースがすべてであると考えてください。その記事には書かれていますが、検索するのにあまり便利ではないので、別の記事を開いて例について説明します。

属性セレクター

[title]: title 属性を持つ要素を選択します


[title='hello']: 属性が title で値が hello である要素を選択します


[title~='hello']: 属性が title で、値の一部が hello である要素を選択します。値はスペースで区切って指定する必要があります


[title*='hello']: 選択された属性は title であり、hello

の要素が含まれています


[title|='hello']: 選択された属性は title で、値は hello で始まり、その後に - が続く任意の文字が許可されます


[title^='hello']: 属性が hello で始まる任意のキャラクター


[title$='hello']: 属性が hello で終わる任意のキャラクター


[title^='hello'][title$='.py']: 属性が hello で始まり .py で終わる要素を選択します

コネクタ


h1~p: h1要素以降の同じレベルのp要素をすべて選択します


p~p: 最初の p 要素を除く、p 要素の後の同じレベルのすべての p 要素を選択します


h1+p: h1 要素の後の最初の兄弟 p 要素を選択します

+ が最初に選択された兄弟要素であるため、span が最初の p タグの前にある場合は機能しません。タイプを制限せずに最初のタイプを選択するだけの場合は、これで機能します。

疑似クラスセレクター


n番目のシリーズ、数字

nth-child(): 位置に応じてカウントします


nth-of-type(): 型に応じてカウントします


nth-last-child(): 位置に応じて最後から数えます


nth-last-of-type(): 型ごとに最後から数えます


選択する最初のいくつかの要素を指定するには、(-n+number) を使用します

-n は、0、-1、-2、-3...

から始まり、負の数の方向に増加します。

インターレースの色変更を実現するには、:nth-child(odd) または :nth-child(even) を使用します。

奇妙です

さえ

シングルセレクション


first-child: 位置によって最初の要素を選択します


first-of-type: タイプごとに最初の要素を選択します

last-child: 位置によって最後の要素を選択します


last-of-type: 最後の要素をタイプ別に選択します

only-child: 他に兄弟要素がない場合に選択されます


only-of-type: 兄弟要素は存在できますが、異なる型でなければなりません


only-of-type を使用すると、他のタイプの要素から要素を選択できますが、only-child では要素が単独で存在する必要があります。これは非常に役立つはずですが、まだ発見されていません。

疑似クラス

:ターゲット

  1. :target を使用してクリック イベントをシミュレートします
  2. ターゲットを使用してタブバーの切り替えを実現します
  3. ターゲット疑似クラスを使用すると、ユーザーが読みたいコメントを簡単にハイライト表示できます

target が作成したタブ切り替えを使用します。もちろん、まだ多くの欠陥がありますが、それを使用して拡張できます。

:empty
子要素もテキストノードも持たない要素を選択します

デフォルトのプロンプトを表示するには、:empty を使用します。

ただし、これに注意する必要があります。ul は改行を含めることができず、次のように記述する必要があります

    改行がある場合は一致しません。実際、ショッピング カートはこれを使用してデフォルトのプロンプトを作成することもできます。

    :root
    ルート要素を選択します。HTMLでは、ルートは常にhtml要素です

    htmlを使うのと同じで、他の用途はまだ考えていません。

    :not
    パラメータは、要素または他の疑似クラスセレクターの受け渡しをサポートしますが、コネクタと疑似要素の受け渡しはサポートしません
    指定されたパラメータを除く任意の要素を選択します

    ケース1: スパンを除く

    ケース 2: 最初の要素を除く

    ケース 3: 最初と最後のものを除く

    他にもご自身で開発された素晴らしい機能があります。

    :オプション

    不要な入力要素を選択してください

    つまり、必須属性なしで input 要素を取得します

    :必須

    必須の属性を持つ要素を選択してください

    :読み書き

    読み取り可能および書き込み可能な入力要素を取得します

    :読み取り専用

    読み取り専用の入力要素を取得する

    :圏外

    入力要素の値が範囲外の場合、範囲は最大値と最小値によって制限されることに注意してください。

    型は数値である必要があります。

    :有効

    最小入力要素と属性の最大値などの制限のあるフォーム要素、合法的な電子メールを含むメール、または数値などの数値フィールドに適用される、すべての合法的な入力を選択します。

    ケース 1: 間違った入力に対するプロンプトを表示するために使用できます。

    反対の色をデフォルトで間違った色に設定するだけです。

    ケース 2: :not と併用する


    要素ステータス擬似クラス

    :checked
    チェックボックスが選択されている場合

    :disabled
    要素が無効な場合

    :enabled
    要素が無効になっていない場合

    疑似要素

    ::first-line
    テキストの最初の行を選択します

    ::first-letter
    最初の文字を選択してください

    ::after
    要素の最後に疑似要素を追加します

    ::before
    要素の先頭に疑似要素を追加します

    小さなアイコンを作成する場合は ::after と ::before を使用でき、他のタグを使用する必要はありません。

    ::selection
    選択したテキストに適用

    これらのセレクターを適切に使用すると、多くの問題を解決できます。まだ研究中であり、この記事の内容は長期的に更新される予定です。

    関連ラベル:
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート