1Css3概述
从2010年开始,HTML5与CSS3就一直是互联网技术中最受关注的两个话题。
从前端技术的角度可以把互联网的发展分为三个阶段：第一阶段是web1.0以内容为主的网络
前端主流技术是HTML和CSS，第二阶段是web2.0的Ajax应用，热门技术是javascrip/DOM/
异步数据请求。第三阶段是即将迎来的HTML5+CSS3时代，这两者相辅相成，使互联网又进入一个崭新的时代。
2什么是CSS，什么是CSS3？
非常简单，CSS代表“Casading Style Sheets”，就是样式表，是一种替代并为网站添加样式的
标记性语言。现在所使用的CSS基本是在1998年推出的CSS2的基础上发展而来的。10年前在
internet开始普及的时候，就能够使用样式表对网页进行视觉效果的统一编辑，但是在10年间
CSS基本没有什么太大的变化，一直到2010年终于推出了一个全新的版本---CSS3 。CSS3
只是表示下一代CSS，3只是版本号，css3在css2.1版本上加入了一些新特性。 CSS3到底给
我们带来了哪些新特性呢？简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果，只
需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影等。CSS3不仅能简化前
端开发工作人员的设计过程，还能加快页面载入速度。
3属性选择器
属性选择器 [att=“value”]匹配属性等于某特定值的元素
[att^="value"] 匹配属性包含以特定的值开头的元素
[att$="value"] 匹配属性包含以特定的值结尾的元素
[att*=“value”] 匹配属性包含含有特定的值的元素
实例： a[title$="tweetCC"] {position: absolute;top: 0; right: 0; display: block;width: 140px；height: 140px;}
浏览器支持: 只有IE6不支持CSS的属性选择器。IE7和IE8、Opera、Webkit核心和Gecko核心的浏览器都支持。所以在你样式中使用属性选择器是比较安全的
4伪类选择器
伪类选择器 伪类选择器是css中已经定义好的选择器，不能随便起名常用的伪类选择器是使用在 a元素上的几种，如：a:link,a:visited,a:hover,a:active.
5伪元素
伪元素选择器不是针对真正的元素使用的选择器，而是针对css中已定义好的伪元素 使用的选择器，css中有如下四种 first-line，first-letter，before，after 例如：p:first-line{color:red;},p:after{content：”内容”}
6结构性伪类选择器
在css3中引入的结构行伪类选择器的共同特性是允许开发者根据文档树中的结构来指 定元素样式。 :root :not :empty :trget :nth-child(n) :nth-last-child(n) :only-child :first-child :last-child 详解：
1. root :root 伪类选择页面的根元素。十有八九根节点是 <html> 元素，例如： :root { background-color: yellow; }
2. not :not 想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素。例如： body *:not(h1) { background-color: yellow; }
3.empty:empty 当元素内容为空时被选中，例如：:empty { background-color: yellow; } <table> <tr><td>a</td><td>b</td></tr> <tr><td>c</td><td></td></tr> </table>
4.trget :trget 目标 当跳转到目标是进行改变例如: :trget h3{color:rde}
5.nth-child(n)和nth-last-child(n)
第一种： 简单数字序号写法（如图1） :nth-child(number)：直接匹配第number个元素。参数number必须为大于0的整数。
例如： li:nth-child(3){background:orange;} /*把第3个LI的背景设为橙色*/ :nth-last-child(n)与上个选择器的思想同样，但是从后面匹配元素
第二种：倍数写法（如图2） :nth-child(an):匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志
如3n、5n。 例子： li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/
第三种：倍数分组匹配（如图3） li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
第四种：奇偶匹配 :nth-child(odd) 与 :nth-child(even) 分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)(2n)结果一样。
第五种 nth-of-tyoe（） 为了解决在同一级别出现其他标签导致找不到想要的元素。
6.last-child 用于选择父元素下的最后一个子节点。例如： li { border-bottom: 1px solid #ccc; } li:last-child { border-bottom: none; } 7.first-child 用法同last-child相同，用于选择父元素下的第一个子节