ホームページ > 記事 > ウェブフロントエンド > CSS3 セレクター (フル)_html/css_WEB-ITnose
CSS3 セレクター (フル)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:26:261428ブラウズ
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 です