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{
background-color: yellow;
}
p:last-child{
background-color: yellow;
}
p:nth-child(even){
background-color: yellow;
}

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

p:first-of-type{
background-color: yellow;
}
*/
p:last-of-type{
background-color: yellow;
}

3、meta标签：

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

<!-- 块包含内联 -->
    <a href="#">  
        <!-- #站位，不知道跳转到哪 -->
        <!-- a标签可以包含任意标签除了他本身 -->
        <div style = "background-color: red;width:20px;">
        </div>

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{}

子元素、后代元素选择器、伪元素、伪类选择器、块和内联元素、属性选择器、常用选择器、开发工具、超链接