HTML5とモバイルWeb：CSSセレクタ

• 基本的なセレクタ構文

セレクタ	タイプ	機能説明
*	ワイルドセレクタ	すべてのHTML要素文書を選択します
E	要素セレクタ	HTML要素の指定されたタイプを選択し、P {}
#ID	IDセレクタ	選択指定のID属性値「ID」要素の任意のタイプ
。クラス	クラスセレクタ	任意の型の「クラス」の指定されたクラス属性値に任意の数の要素を選択します

何も言うことない、基本的な操作

• レベルセレクタの構文

セレクタ	タイプ	機能説明
EF	子孫セレクタ（セレクタが含まれています）	Fを選択マッチした要素とFの整合要素が整合素子E内に含まれています
E> F	子供セレクタ	F子要素要素の一致を選択し、整合素子E F要素にマッチします
E + F	隣接兄弟セレクタ	マッチした要素とF整合素子E直ちに位置整合要素の選択の背後にあるF
E〜F	ユニバーサルセレクタ	すべてのマッチング整合素子F、Eと位置整合要素の後に選択されるF要素

ケース：

子孫のセレクター：

息子発生素子は、孫が含まれています

子供セレクタ：親クラスをサブクラスと一緒にカバーされますので、Doが、ここでは背景色を使用しません

ラベルのみラベル子供を選択

隣接兄弟セレクタ：

同じディレクトリに最初の兄弟を選択

ユニバーサルセレクタ：

このタブの下のサブクラス、クラス孫を含め、すべてを選択します。

• ダイナミック疑似クラスセレクタの構文

セレクタ	タイプ	機能説明
E：リンク	リンク擬似クラスセレクタ	一致する要素Eを選択して、要素に一致するハイパーリンクが訪問されていないとして定義されています。一般的にリンクポイントを記述するために使用
E：訪問	リンク擬似クラスセレクタ	整合素子Eを選択し、一致要素がハイパーリンクとして定義され、訪問されました。一般的にリンクポイントを記述するために使用
E：アクティブ	ユーザーの行動セレクタ	整合素子Eを選択し、マッチング要素がアクティブになります。一般的にリンクやボタンのポイントを記述するために使用
E：ホバー	ユーザーの行動セレクタ	要素E.上でマッチング要素E、およびユーザーのマウスを選択 IE6とブラウザがサポートする以下のみ：ホバー
E：フォーカス	ユーザーの行動セレクタ	整合素子Eを選択し、焦点照合要素を取得

4つのアンカー擬似クラスを設定するために、1つの警告があり、それは彼らが愛憎の原則を遵守してみましょう、そのためである愛/憎しみ、、あるリンク-訪問-ホバー-アクティブ。

• ：ホバーは、ユーザがこれらを達成するために、マウスを移動したときに使用されます。
• アクティブその瞬間の要素をユーザーがクリックする効果（その時点で何が起こっているかは、この操作が終了したマウスボタンを離します）
• ：フォーカスの焦点にするために使用される要素は、これは多くの場合、フォーム要素に使用されます。

• UI 要素状態擬似クラスセレクタ構文

セレクタ	機能説明
E：チェックします	（のみラジオボタンやチェックボックスのための）選択された入力要素を選択
E：有効	状態を有効にするには、要素を選択します
E：無効	無効状態の要素を選択します
E：デフォルト	デフォルトの要素を選択
E：有効	入力検証の入力要素に有効か無効応じて選択します
E：イン・レンジ/ ：範囲外の	位置の範囲の開発で入力要素を選択するか、制限
E：必要/ ：オプション	必要な属性選択入力要素を：許可するよると

• 構文の選択を使用して疑似クラス構造

セレクタ	機能説明
E：最初の子	素子Eの親要素の最初の子要素として、そして、E：n番目の子（1）と同等
E：最後の子	素子Eの親要素の最後の子として、そして、E：n番目の-最後の子（1）と同等
E：ルート	ルート要素文書の要素Eにマッチする]を選択します。HTML文書は、ルート要素は、常に選択されたタイプのセレクタと同じコンテンツがHTMLに一致する点で、HTML、あります
EF：n番目の子（N）	E Fのn番目の要素の親要素を選択します 前記nは整数（1,2,3）、キーワード（偶数、奇数）であってもよい、式は、開始値とnの値が1の代わりに0であり、（2N + 1）であってもよいです。
EF：n番目の-最後の子（N）	F.の逆のn番目の要素に親要素Eを選択 このセレクタとE：n番目の子（n）は、セレクタの反対側に順次計算されるが、この方法の使用は、同じ、請求される：第n最後の子は、（1）常に最後の子に相当し、最後の要素と一致します
E：n番目の型（N）	Eのn番目の要素内の親要素の指定されたタイプを選択します
E:nth-last-of-type(n)	选择父元素内具有指定类型的倒数第n个E元素
E:first-of-type	选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同
E:last-of-type	选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同
E:only-child	选择父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type	选择父元素只包含一个同类型子元素，且该子元素匹配E元素
E:empty	选择没有子元素的元素，而且该元素也不包含任何文本节点

• 伪元素选择器

E:first-letter/E::first-letter：设置对象内的第一个字符的样式

E:first-line/E::first-line：设置对象内的第一行的样式

E:before/E::before：设置在对象前发生的内容，用来和content属性一起使用

E:after/E::after：设置在对象后发生的内容，用来和content属性一起使用

E::selection：设置对象被选中时的颜色

• 属性选择器

1. E[attr]：只使用属性名，但没有确定任何属性值；
2. E[attr="value"]：指定属性名，并指定了该属性的属性值；
3. E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写；
4. E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
5. E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
6. E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；
7. E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;