css3 选择器总结，基本的用法

<!-- 
    一. css3 简短介绍

1. CSS3 的历史
   CSS2 —》 CSS3
   -webkit chrome / safari
   -ms ie
   -moz firefox
   -o opera

注： 一开始每家浏览器在css提出标准的时候，每个浏览器实现版本的时间不齐，所以每个浏览器有一个自己实现的标准。所以就会有前端之称。 在后面每家浏览器商发现大家都支持css3后，所以都遵守CSS3发布的干净版本。知道现在，css3还是有部分属性每个浏览器还需要加上前缀才可以使用。这个与浏览器的内核有关。

查看兼容性手册：http://css.doyoe.com
权威的网站： http://www.caniuse.com
可以使用autoprefixer 使用这个插件，打包后会自动加上兼容性的前缀
预处理器：pre-processor,有一定的语法规范，然后编译成css代码
less/sass cssNext：插件

后处理器：post-processor，补齐代码的前缀，达到兼容性
autoprefixer： 插件
不管是预处理器，还是后处理器，都要使用postCss 插件，才能使用上面的预处理器或者后处理器

问: postCss 是啥？
答： 用js实现的css的抽象的语法树AST(Abstract Syntax Tree)，剩下的事情留给后人来做了，充分体现了扩展性，有200多个

问：cssNext是啥？
答：cssNext 有点像css4.0， 简化版的less和sass 是朝着css4.0的版本来发展，用来实现一些未来标准的（未完全在各大浏览器）

二.css3 选择器
关系型选择器：选择器模式，E + F（选完E后，在选择下一个满足条件的兴地元素节点）
E ~ F (选完E后，选择下面所有的满足条件的兄弟元素节点)
E > F(父子选择器)

属性选择器：E[attr~=“val”] (选完E后，属性名必须要有val的元素)
E[attr|=“val”] (选完E后，属性名为attr的必须要有val,或者是val-的元素)
E[attr^=“val”] (选完E后，属性名为attr,和以val开头的元素)
E[attr$=“val”] (选完E后，属性名为attr,以val结尾的元素)
Eattr*=“val”

伪元素选择器：::before :befor ::after :after 在css2中几个冒号都行,下面的必须要有两个冒号
E::placeholder 只能改变字体颜色， 一般不能用，兼容性差,需要加前缀
E::selection 用与鼠标选中字体的颜色,只能设置三个属性，color,background-color,text-shadow,兼容性比较好，只要Firefox才要加前缀

伪类选择器：被选中元素的一种状态
E:not(val) (在选中E后，不是val的选择器),与jq的not相似 一般用于,去除个别不需要加样式的元素
E:root (root,根标签选择器，root包含 html,一般直接:root使用)
E:target (target,被锚点标记，location.hash = 被标记之后的div，可以使用css控制页面结构样式)

     ----------------下面这五种选择器会被其他元素影响---------
     E:first-child   (选中E的前提下，里面第一个元素)
     E:last-child:  (选中E的前提下，里面选择最后一个元素)
     E:only-child   (选中E后，里面独生子设置样式)
     E:nth-child(n)  (选择E的前提下面，里面可以选中一系列的元素， n从0开始查数的，css中从1开始查数，例如：2n是偶数，2n+1 是奇数)
     E:nth-last-child(n) （在选中的E的前提下，倒序查找元素）
     ----------------上面面这五种选择器会被其他元素影响-,所以不常用--------


    ----------------下面这五种选择器不会会被其他元素影响-,常用-！！！！-------
     E:first-of-type: (选中E的前提下面，选中满足类型元素的第一个)
     E:last-of-type: (选中E的前提下面，选中满足类型元素的最后一个)
     E:only-of-type: (选中E的前提下，只有一个满足类型的元素,独特的元素)
     E:nth-of-type() :(选择E的前提下面，里面可以选中同一类型的元素， n从0开始查数的，css中从1开始查数，例如：2n是偶数，2n+1 是奇数)
     E：nth-of-last-type() :(选中E的前提下，倒叙查找满足类型的元素)
     
     E:empty 元没有元素节点的素被选中  没有hasChildNodes,
    -------------针对表单元素选择器-------------
     E:checked 表单元素中被选中的元素，(下面有demo)
     E:disabled 表单元素选中disabled的元素
     E:enabled 表单元素选中enabled的元素
     E:read-only 表单元素选中只能读的元素
     E：write-only 表单元素选中只能写的元素