CSS3选择器总结

CSS3的选择器以及浏览器的支持情况。

1.基本选择器

通配选择器： * { margin:0;padding:0; }
元素选择器： p { color:red; }
ID选择器： #id { …… }
类选择器： .class { …… } （也可以用带元素的类选择器：p.class { …… }）
群组选择器： selector1,selector2,……,selectorN { …… }

2.层次选择器

后代选择器： div span { …… } /*选择div元素内的span元素*/
子选择器： div > span { …… } /*选择div元素的子元素span*/
相邻兄弟选择器： div + p { …… } /*选择div后紧邻的p元素*/
通用选择器： div ~ p { …… } /*匹配div后所有的兄弟p元素*/

3.伪类选择器

1. 动态伪类选择器
   链接伪类选择器：
   a:link { …… } /*匹配的a元素定义了超链接未被访问*/
a:visited { …… } /*匹配已访问的a元素*/

   用户行为伪类选择器：
   a:active { …… } /*匹配被激活的a元素*/
a:hover { …… } /*匹配鼠标悬浮的a元素*/
a:focus { …… } /*匹配获得焦点的a元素*/

2. 目标伪类选择器
   p:target { …… } /*匹配当前活动的p元素*/
   例： <a href="#news">跳转至</a>
<p id="news">内容……</p>
   当点击a时，p:target选择到当前id=”news”的p元素

3. 语言伪类选择器
   ap:lang(en) { …… } /*选择带有以en开头的lang属性的p元素*/

4. UI元素状态伪类选择器
   选中状态伪类选择器：input:checked { …… } /*匹配所有选中的input元素（单选、复选）*/

   启用状态伪类选择器：input[type="text"]:enabled { …… } /*匹配所有可输入的输入框input元素*/

   不可用状态伪类选择器：input[type="text"]:disabled { …… } /*匹配所有不可输入的输入框元素*/

5. 结构伪类选择器
   p:first-child { …… } /*匹配作为其父元素的第一个子元素的p元素*/

   p:last-child { …… } /*匹配属于其父元素的最后一个子元素的p元素*/

   :root { …… } /*匹配当前文档的根元素，即html*/

   div p:nth-child(n) { …… } /*选择div下第n个子元素p（n可以为even表示偶数，odd表示奇数，也可以为表达式）*/

   div p:nth-last-child(n) { …… } /*选择div下倒数第n个子元素p元素*/

   p:nth-of-type(n) { …… } /*选择其父元素下第n个p元素*/

   p:nth-last-of-type(n) { …… } /*选择其父元素下倒数第n个p元素*/

   p:first-of-type { …… } /*选择其父元素下第1个p元素*/

   p:last-of-type { …… } /*选择其父元素下倒数第1个p元素*/

   p:only-child { …… } /*选择其父元素下唯一一个子元素p元素*/

   p:only-of-type { …… } /*选择其父元素下唯一一个p元素（父元素中可以有其他非p元素，但必须有且只有一个p元素才可以匹配）*/

   p:empty { …… } /*选择没有子元素的p元素（并且也不能有文本节点）*/

6. 否定伪类选择器
   E:not(F) { …… } /*匹配所有除元素F外的所有E元素*/
   例： :not(p) { …… } /*匹配除p元素外的所有元素*/
   例：input:not([type=submit]) { …… } /*匹配所有非submit的input元素*/

4. 伪元素

p::first-letter { …… } /*匹配p元素的第一个字母*/

p::first-line { …… } /*匹配p元素的第一行文本*/

p::before { …… } /*在p元素前插入……*/

p::after { …… } /*在p元素后插入*/

::selection { …… } /*控制被选中的文本的颜色、背景*/

5.属性选择器

E[attr] { …… } /*匹配带有属性attr的E元素，E可省略*/
例：a[target] { …… }

E[attr=val] { …… } /*匹配带有属性attr=val的E元素，E可省略*/
例：a[target=_blank] { …… }

E[attr|=val] { …… } /*匹配带有属性attr=val或以val开头的E元素*/
例：p[lang|=en] { …… }

E[attr~=val] { …… } /*匹配属性attr中有val并且以空格隔开的E元素*/
例：<a title="pic flower you">click me</a> a[title~=flower] { …… }

E[attr*=val] { …… } /*匹配属性attr中包含val的E元素*/
例：div[class*=test] { …… }

E[attr^=val] { …… } /*匹配属性attr是以val开头的E元素*/
例：div[class^=test] { …… }

E[attr$=val] { …… } /*匹配属性attr是以val结尾的E元素*/
例：div[class$=test] { …… }

浏览器兼容性

选择器	IE	Firefox	Chrome	Safari	Opera
基本选择器	6+	√	√	√	√
层次选择器	7+	√	√	√	√
层次选择器（后代选择器）	6+	√	√	√	√
动态伪类选择器	6+	√	√	√	√
动态伪类选择器（E:active,E:focus）	8+	√	√	√	√
目标伪类选择器	9+	√	√	√	9.6+
语言伪类选择器	8+	√	√	√	9.2+
UI元素状态伪类选择器	9+	√	√	√	√
结构伪类选择器	9+	√	√	√	√
否定伪类选择器	9+	√	√	√	√
伪元素	8+	√	√	√	√
属性选择器	7+	√	√	√	√

---

参考资料：《图解CSS3 核心技术与案例实战》 大漠著