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标签：
<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
<!-- 块包含内联 -->
<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{}
