一．基本选择器

1.通配选择器：[ * ] 选择文档中所以HTML元素。

 *{margin: 0;padding: 0;} /*选择页面中的所有元素并设置margin和padding值为0*/ .mumu *{background:#000;} /*选择类名为mumu的元素下面的所有元素设置背景为黑色*/

2.元素选择器：[ E ] 选择指定类型的HTML元素。

p{color:red;} /*选择p元素*/

3.ID选择器： [ #id ] 选择指定ID属性值为“id”的任意类型元素。

 1

4.类选择器: [ .class ] 选择指定class属性值为“class”的任意类型的任意多个元素.

 1

5.群组选择器: [ selector1,selectorN ] 将每一个选择器匹配的元素集合并.

 1 2 3

二．层次选择器

1.后代选择器：[ E F ] 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内。

 2 3 

2.子选择器：[ E>F ] 选择匹配的F元素，且匹配的F元素是所匹配的E元素的直系子元素

 2 4 

3.相邻兄弟元素选择器：[ E+F ] 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面

 2 
p1
 
p2
 

4.通用选择器： [ E~F ] 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素（E和F是同辈元素，具有相同的父元素）

 2 
1
 
2
 

三.属性选择器

1. E[attr] 只使用属性名，但没有确定任何属性值

 
1
 
2

2.E[attr=value] 指定属性名，并指定了该属性的属性值

 
1
 
2

3.E[attr~=value] 指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中只要包含了一个value词就会被选中

 
1
 
2

4.E[attr^=value]指定了属性名，并且有属性值，属性值是以value开头的

 
1
 
2
 
3

5.E[attr$=value]指定了属性名，并且有属性值，而且属性值是以value结束的

 
1
 
2
 
3

6.E[attr*=value]指定了属性名，并且有属性值，而且属值中包含了value

 
1
 
2
 
3

7.E[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说b-cn）

 
1
 
2
 
3
 
4

四．伪类选择器

1.动态伪类选择器

2.目标伪类选择器

[ E:target ] 功能：选择匹配E的所有元素，且匹配元素被相关URL指向

   div1 div2 div3 div1 div2 div3

3. 否定伪类选择器

[ E:not(s) ] 表示匹配所有除元素F外的E元素

   
h1
 
h1
 
h1

4.状态伪类选择器

5.结构伪类选择器

E:nth-child(n) 表示E父元素中的第n个字节点（从前往后数），注意：CSS3中计数是从1开始,n可运算

   
p1
 
h1
 
p2
 
h2
 
p3
 
h3
 
p4
 
p5

E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算

E:nth-of-type(n) 表示E父元素中的第n个字节点，且类型为E，从前往后计算

E:nth-last-of-type(n) 表示E父元素中的第n个字节点，且类型为E,从后向前计算

   
p1
 
h1
 
p2
 
h2
 
p3
 
h3
 
p4
 
p5

E:first-child 表示E元素中的第一个子节点

E:last-child 表示E元素中的最后一个子节点

E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的

E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的

:first-child==:nth-child(1)

:last-child==:nth-last-child(1)

:first-of-type==nth-of-type(1)

:last-of-type==nth-last-of-type(1)

E:empty 表示E元素中没有子节点。注意：子节点包含文本节点

 //it 
h1
 
p2
 
h2
 
p3

E:only-child 表示E元素中只有一个子节点。注意：子节点不包含文本节点

E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点

五．伪元素

E:first-line 匹配E元素中的第一行文本

E:first-letter 表示E元素中的第一个字符

E::selection表示E元素在用户选中文字时

E::before 生成内容在E元素前

E::after 生成内容在E元素后

   
两个“：：”和一个“：”css3中主要用来区分伪类和伪元素，到目前来说，这两种方式都是被接受的

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com