CSS3中添加了很多选取html元素的新样式，我们都知道，通过选择器的方式选择元素比通过设置id和class更利于网页优化，接下来看看CSS3的选择器;
关系选择器：
例：p ~ span （兄弟选择）
属性选择器：
[ ] : span [date] { ... } 表示选中span中包含date这个属性的元素
[ val = ' x']：span[ val = " tar"] 表示选中 val = x的 所有元素 <span val = "x"></span>
[ val ~= 'span2'] 表示val中包含span2的元素
[val ^='s'] 表示选中val的值中以 s 开头的元素
[val $='n'] 表示val中以 n结尾的元素
[ val * = 'sp'] 表示匹配val值中有 sp 的元素
伪选择器：
: : before 例： span : :before{ ... } 表示在sapn之后
: : after 例： 表示在其之前
: first-letter{ ... } 选中当前行的第一个字 可搭配浮动设置首字下沉的效果
:first-line:选中当前这一行
: :seletion{...} 设置选中时的样式
: :placehoder{...} 设置input中提示字的样式
p: : not(.li){...} 表示 p 中除了.li 以外的元素被选中时的状态
:root 根元素，相当于html，且后面的元素会继承根元素属性
:target 目标选择器，用来匹配文档的url的某个标志符的目标元素
例： <a href = "#target">Text</a>
:target{ display:block}
:first-child:表示第一个子元素
:only-child:表示仅有
:last-child : 表示最后一个子元素
:nth - child(n) : n 为数字算式
:nth - last - child(n)
:first - of - type: 表示其父元素的首个元素的每个当期元素
:last - of - type :表示其父元素的首个元素的每个末尾元素
:only - of - type:其父元素的唯一子元素的每个当前元素
:nth - of - type(n) 表示其父元素第n个元素的每个当前元素
:nth - last - of - type(n) 表示其父元素第n个元素的每个当前元素（从后往前算）
:empty 表示空节点 注释也算作空
:checked ：表示选中时的状态
: enabled ：表示可用或者不可用的状态
:disabled ：表示禁用状态
:read - only : 表示制度状态