ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS3 セレクター (フル)_html/css_WEB-ITnose

CSS3 セレクター (フル)_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:26:26
オリジナル
1457 人が閲覧しました

CSS セレクターのレビュー

ユニバーサル セレクター: * すべての要素を選択します
子要素を選択します: > 要素の直接の子孫を選択します (第 1 レベルの子要素)
隣接する兄弟セレクター: + 直後の最初の要素を選択しますターゲット要素
通常の兄弟セレクター: ~ 直後のすべての兄弟要素を選択します

疑似要素セレクター:
::first-line はテキスト ブロックの最初の行と一致します
::first-letter は最初の文字を選択しますテキストブロックの
疑似クラスセレクター:
:before、:after 要素コンテンツの前後にコンテンツを追加します (インライン要素に相当)
CSS3 構造セレクター
:nth-child 指定されたインデックスの子要素を選択します
nth-child (n) 親要素の下にある n 番目の子要素 ​​
nth-child(odd) 奇数番目の子要素 ​​(nth-child(2n-1) と同じ)
nth-child(even) 偶数番目の子要素 ​​(n 番目と同じ) -child(2n))
nth-child(an+b) 式
(nth-child は 1 から始まります)
:nth-last-child(n) 最後の子要素から n 番目の子要素 ​​
:nth-of-type ( n) 親要素の下にある指定された型の n 番目の子要素
:nth-last-of-type 親要素の下にある指定された型の n 番目の子要素
:first-child 親要素の下にある最初のものを選択する 子要素
:last-child は、親要素の下にある最後の子要素を選択します
:only-child は、親要素の下にある唯一の子要素を選択します
:only-of-type は、親要素の下にある指定されたタイプの唯一の子要素を選択します
: root select ドキュメントのルートディレクトリ、HTML に戻ります

div :only-child スペースに注意してください (div の下にある唯一の子要素を選択します)
擬似クラスセレクター
:link のスタイルを設定します未訪問のページを指すリンク
:visited 訪問済みページへのリンクのスタイルを設定します
: マウスをホバーするとトリガーされます
:active クリックされたときにトリガーされます
:enabled 有効なステータス要素を選択します
:disabled 無効なステータス要素を選択します
:checked 選択した入力要素を選択します (ラジオ ボタンまたはチェック ボックス)
:default はデフォルトの要素を選択します
:valid、invalid は入力検証に従って有効または無効な入力要素を選択します
: 範囲内、範囲外は要素を選択します指定された範囲内または範囲外
: repuired、オプション :required 属性が許可されるかどうかに基づいて入力要素を選択します

リンクの色が訪問した色と同じに設定されている場合、ページが開かれると、リンクのスタイルが上に示すように、訪問したスタイルによって上書きされると、a タグに表示されるフォントの色は緑色になります。
ただし、異なる属性に設定すると、重ね合わせた効果を示すことができます。

ラベルをクリックすると、文字の色が黄色になります。
ラベルを使用してラジオのスタイルを変更します: 次のように:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="Keywords" content="关键词一,关键词二">    <meta name="Description" content="网站描述内容">    <meta name="Author" content="刘艳">    <title></title>    <style> input[type="radio"]{display: none;} label{display: inline-block;width: 24px;height: 24px; border-radius: 50%;border: 1px solid #ccc;margin: 5px;} :checked + label{background: #00b3ee;} </style></head><body>    <input type="radio" name = "fruit" id = "check1"/>    <label for="check1"></label>    <input type="radio" name = "fruit" id = "check2"/>    <label for="check2"></label>    <input type="radio" name = "fruit" id = "check3"/>    <label for="check3"></label>    <input type="radio" name = "fruit" id = "check4"/>    <label for="check4"></label></body></html>
ログイン後にコピー

達成される効果:

:default

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="Keywords" content="关键词一,关键词二">    <meta name="Description" content="网站描述内容">    <meta name="Author" content="刘艳">    <title></title>    <style> :default{background: #009FE6;} </style></head><body>    <form>        <input type="text">        <button>按钮</button>        <input type="submit" value="提交">    </form></body></html>
ログイン後にコピー

フォーム内でデフォルトでフォーカスを取得するボタン

属性セレクター
E[attr ] 属性名、特定の属性値が不明
E[attr="value"] 属性名を指定し、それに対応する属性値を指定します
E[attr ~="value"] 属性名を指定し、属性名を検索しますこの属性名を持つもので、それに一致します。 他の属性名は次のようにスペースで区切られます。

E[attr ^= “value”] は属性名を指定し、属性値は value
E[attr $=” で始まります。 value”] は属性名を指定し、属性値は value End で始まります
E[attr *=”value”] は属性名を指定し、属性値には値が含まれます
E[attr |= “value”] は属性を指定しますname であり、属性値が value- で始まるか、値が value です

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