Css3 選擇器

Css3 選擇器 --屬性選擇器(1)

E[attr]　　只使用屬性名，但沒有肯定任何屬性值
E[attr="value"]指定屬性名，並指定了該屬性的屬性值
E[attr~="value"]指定屬性名，而且具備屬性值，此屬性值是一個詞列表，而且以空格隔開，其中詞列表中包含了一個value詞，並且等號前面的「〜」不能不寫
E[attr^="value"]指定了屬性名，而且有屬性值，屬性值是以value開頭的
E[attr$="value"]指定了屬性名，而且有屬性值，並且屬性值是以value結束的
E[attr*="value"]指定了屬性名，而且有屬性值，並且屬值中包含了value
E[attr|="value"]指定了屬性名，而且屬性值是value或者以「value-」開頭的值（好比說zh-cn）

備註：IE7及以上支持;

　　

Css3 選擇器 –結構性僞類

E:nth-child(n)  表示E父元素中的第n個字節點
p:nth-child(odd){background:red}/*匹配奇數行*/
p:nth-child(even){background:red}/*匹配偶數行*/
p:nth-child(2n){background:red}
E:nth-last-child(n) 表示E父元素中的第n個字節點，從後向前計算
E:nth-of-type(n)  表示E父元素中的第n個字節點，且類型爲E
E:nth-last-of-type(n)表示E父元素中的第n個字節點，且類型爲E,從後向前計算
E:empty 表示E元素中沒有子節點。注意：子節點包含文本節點
E:first-child 表示E元素中的第一個子節點
E:last-child 表示E元素中的最後一個子節點
E:first-of-type 表示E父元素中的第一個子節點且節點類型是E的
E:last-of-type 表示E父元素中的最後一個子節點且節點類型是E的
E:only-child表示E元素中只有一個子節點。注意：子節點不包含文本節點
E:only-of-type 表示E的父元素中只有一個子節點，且這個惟一的子節點的類型必須是E。注意：子節點不包含文本節點

 

Css3 選擇器 --僞類

E:target 表示當前的URL片斷的元素類型，這個元素必須是E
E:disabled 表示不可點擊的表單控件
E:enabled 表示可點擊的表單控件
E:checked 表示已選中的checkbox或radio
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一個字符
E::selection表示E元素在用戶選中文字時
E::before 生成內容在E元素前
E::after 生成內容在E元素後
E:not(s) 表示E元素不被匹配
E~F表示E元素毗鄰的F元素
Content 屬性