一. 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结尾的元素) E[attr*="val"](选完E后，只要存在过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 表单元素选中只能写的元素
