1、后代元素选择器（父类直接包含子类）：

语法：祖先元素 后代元素{}

#d1 span{        color:green;}/*选中id为d1的div中的p元素中的span元素*/ #d1 p span{ font-size:50px }

2、子元素选择器（父类直接或间接包含子类）：

语法：父元素>子元素

（IE6及以下的浏览器不支持子元素选择器）

div > span{            background-color: yellow;        }

1 、:first-child 可以选中第一个子元素

2 、:last-child 可以选中最后一个子元素

3 、:nth-child(number/even/add)

可以选中任意位置的子元素

该选择器后边可以指定一个参数，指定要选中第几个子元

素even 表示偶数位置的子元素

odd 表示奇数位置的子元素

/body的第一个元素/

body>p:first-child{

}

p:last-child{

}

p:nth-child(even){

}

:first-of-type (不用是全部的第一个元素，是这一类的第一个就可以了)

:last-of-type

:nth-of-type

p:first-of-type{

}

*/

p:last-of-type{

}

3、meta标签：

<meta charset="utf-8" />

4、伪元素：

第一个字：

p:first-letter{}

第一行：

p:first-line{}

该段之前的可以插东西：

p:before{}

该段之后的可以插东西：

p:after{}

4、伪类选择器：

没访问的：

a:link{}

访问过的：

a:visited{}

鼠标滑过：

a:hover{}

正在点击：

a:hover{}

获取焦点：

input:focus{}

选中样式：

p::selection{}

火狐使用：

p::-moz-selection{}

5、块和内联元素：

块元素（标签）：div（没有任何特殊的含义只是普通的块元素）、p(不能包含其他标签) h1~h6 ul li

内联元素（行内元素）：span a（超链接，可以包含任意元素） img iframe

6、属性选择器：

所有有title的标签：

p[title] {}

title的内容：

p[title="hello"] {}

标题以什么开头：

p[title^="ab"]{}

标题以什么结束：

p[title$="ab"] {}

包含：

p[title*="ab"] {}

6、常用的选择器：

通配选择器：

*{}

元素选择器：

p {}

id选择器：

p1{}

类选择器：

.p1{}

选择器分组（并集选择器）:

p1,.p1,.hello{}

复合选择器：

p#p1{}

span.p3{}