CSS3 selector_html/css_WEB-ITnose

基本セレクター

1. ワイルドカード セレクター (*) — すべてのブラウザーでサポートされます

*{    marigin: 0;    padding: 0; }

2. 要素セレクター (E) — すべてのブラウザーでサポートされます
3.クラスセレクター ( .className) — すべてのブラウザでサポート
4. ID セレクター (#ID) — すべてのブラウザでサポート
5. 子孫セレクター (Ｅ Ｆ) — すべてのブラウザでサポート

descendantＦ 要素 をすべて選択

6. 子要素セレクター (E>F) - IE6 は をサポートしていません。

隣接する

子要素 を選択します。兄弟要素セレクター (E + F) - IE6 は
EF の 2 つの要素が同じ親要素を持ち、F 要素が EF 要素の後ろに隣接していることをサポートしません。 ユニバーサル兄弟選択セレクター (E ～ F)。 — IE6 は

をサポートしません

要素の背後にあるすべての兄弟要素を選択します
9. グループ セレクター (selector1、selector2、...、selectorN)

— すべてのブラウザーがサポートします

Every セレクターを区切るにはカンマ「,」を使用します

属性セレクター

IE6 は

E[attr]: 属性名のみが使用されますが、属性値は決定されません

E[attr=" value"]

: 属性名を指定し、属性の属性値を指定します。 E[attr~="value"]
: 属性名を指定し、属性値を指定します。この属性値は、スペースで区切られた単語リストです。 E[attr="value"] と E[attr~="value"] の違い: 属性 チルダ (~ がある場合) ) セレクター内で、属性値に value がある場合に一致します。チルダ (~) がない場合、属性値が完全に value である必要がある場合に一致します。
E[attr^="value"]

: 属性名が指定され、属性値が value で始まります

E[attr$="value"]

: 属性。名前が指定され、属性値があり、属性値が value で終わる E[attr*="value"]: 属性名が指定され、属性値があり、属性値が存在します。 value を含む;
E[attr|="value"]: 属性名が指定され、属性値は value または「value-」で始まる値 (zh-cn など);
Pseudo -class selector
1. 動的疑似クラス :hover については、IE6 では a 要素のみがサポートされ、:active は IE6-7 でのみサポートされ、:focus は IE6-7 ではサポートされません。

.demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/.demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/.demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/.demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/

順序に注意してください: 愛憎原則 LoVe/HAte、つまり Link--visited--hover--active

フォーカスになる要素の :focus もあります。フォーム要素でよく使用されます。

2. UI 要素のステータス疑似クラス

IE6-8 は

":enabled"、":disabled"、":checked" をサポートしていません。主に HTML

input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}

3 の Form 要素操作用です。 :nth セレクター

:first-child

は要素の最初の子要素を選択します;

:last-child

は要素の最後の子要素を選択します :nth-child( n)

1 つを選択します。要素のより具体的な子要素は、IE6 ～ 8 および FF3 ブラウザでは「:nth-child」セレクターをサポートしません。

n は整数、式、またはキーワードです。
整数: :nth-child(3) など、特定の要素の下の 3 番目の子要素を選択します。 +1、n は 0 から始まります。ここでの n は n のみであり、他の文字に変更することはできません。 :nth-last-child()
特定の要素を選択します。この要素の最後の子要素から始まる子要素。 :nth-of-type()

指定された要素を選択します。

:nth-of-type は:nth-child と似ています。唯一の違いは次のとおりです。このメソッドは要素のタイプを指定します。

:nth-last-of-type()

最後の要素から数えて、指定された要素を選択します。

:first-of-type

同じ要素の最初の子要素を選択します。上位要素の下にある型; 2 つのセレクター: first-of-type と :last-of-type は、first-child と :last-child に似ています。違いは、要素の型を指定するだけです。
:last-of-type 親要素の最後の類似する子要素を選択します。

:only-child

選択された要素は、その親要素の唯一の要素です。

":only-child"表示的是一个元素是它的父元素的唯一一个子元素
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty选择的元素里面没有任何内容。

:empty是用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格；

3、否定选择器（:not） IE6-8浏览器不支持

input:not([type="submit"]) {border: 1px solid red;}

4、伪元素

两个“：：”和一个“：”css3中主要用来区分伪类和伪元素，到目前来说，这两种方式都是被接受的，也就是说不管使用哪种写法所起的作用都是一样的，只是一个书写格式不同而以。

::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式；

::first-letter选择文本块的第一个字母，除非在同一行里面包含一些其它元素，不过这个主要运用于段落排版上多，比如说首字下沉；

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动；

::selection 用来改变浏览网页选中文的默认效果；

/*Webkit,Opera9.5+,Ie9+*/   ::selection {	background: 颜色值；	color:颜色值；   }   /*Mozilla Firefox*/   ::-moz-selection {	background: 颜色值；	color:颜色值；    }

“::selection”只能设置两个属性，一个就是background,另一个就是color属性，设置其他属性是没有任何效果的。

参考：http://www.w3cplus.com/css3/basic-selectors