CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。
CSS3前缀:
在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。 标准写法如表顺序，再在后面添加无前缀的
我们需要全面的兼容性查阅手册 http://www.runoob.com/cssref/css3-browsersupport.html 兼容性参考手册
css3选择器
一、属性选择器
E[att^=“val”] {…} 选择匹配元素E, 且E元素定义了属性att, 其属性值以val开头的任何字符串
E[att$=“val”]{…}选择匹配元素E, 且E元素定义了属性att, 其属性值以val结尾的任何字符串
E[att*=“val”]{…}选择匹配元素E, 且E元素定义了属性att, 其属性值任意位置出现了“val”。即属性值包含了“val”，位置不限。
E[att~=“demo”]{…} 选择匹配元素E, 且E元素定义了属性att, 属性值里存在单词demo
二、伪类选择器
初级伪类选择器：伪类用于向某些选择器添加特殊的效果。
1.root 根标签选择器
“:root”选择器等同于<html>元素，简单点说：
:root{background:orange}
html{background:orange}
得到的效果等同
建议使用:root（xml等）
2.:not 否定选择器
用法和jQuery 中的not类似，可以排除某些特定条件的元素
div:not([class=“demo”]){ background-color:red; } 意思为除了class为demo的div以外，所有的div的背景颜色都变红
3.empty 空标签选择器
用来选择没有内容的元素、不在文档树中的元素，这里的没有内容指的是一点内容都没有，哪怕是一个空格。
<style> div:empty{ 100px; height:100px; background-color:red; margin-top:10px; } </style> </head> <body> <div class = "demo"></div> <div class = ""> <div class = "son"></div> </div> <div class = "xxx"> </div> //empty选中的div是class为demo son的div
4.target 目标元素选择器（点击哪个哪个就是目标）
用来匹配被location.hash 选中的元素(即锚点元素) 选择器可用于选取当前活动的目标元素
<style> .demo { 100px; height:100px; background:red; margin-bottom:1000px; } div:target{ background:greenyellow; } //点击的demo作用于当前的黄绿颜色 </style> </head> <body> <a href="#demo1">demo1</a> <a href="#demo2">demo2</a> <a href="#demo3">demo3</a> <div class="demo" id="demo1">demo1</div> <div class="demo" id="demo2">demo2</div> <div class="demo" id="demo3">demo3</div>
5、
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n){} //传1 代表第一个子元素、n+1代表 1、2、3一直到最后（n从0开始） 2n（0、2、4）偶数 或用even、odd
:nth-last-child(){} 从后往前数
以上四个选择器均有弊端，即如果当前位置元素不是前面所修饰的元素，那么无效 （注：其父元素的第 N 个子元素，不论元素的类型。）
div：first-child { background:red; } //demo1 demo5变色 </style> </head> <body> <div class="demo" id="demo1">demo1</div> <div class="demo" id="demo2">demo2</div> <div class="demo" id="demo3">demo3</div> <div class="demo" id="demo4"> <div class="demo" id="demo5">demo5</div> </div> <div class="demo" id="demo6">demo6</div>
6、
:first-of-type （:last-of-type 是demo6 demo5变色）
:nth-of-type :nth-last-of-type 同理
此种选择器，限制了类型，即在所修饰元素的类型下选择特定位置的元素。
<style> div：first-of-type { background:red; } //demo1 demo5变色 </style> </head> <body> <div class="demo" id="demo1">demo1</div> <div class="demo" id="demo2">demo2</div> <div class="demo" id="demo3">demo3</div> <div class="demo" id="demo4"> <p></p> <div class="demo" id="demo5">demo5</div> </div> <div class="demo" id="demo6">demo6</div>
7、
:only-child 唯一子元素选择器
选择是独生子的子元素，即该子元素不能有兄弟元素，它的父元素只有他一个直接子元素。
注意：选择的元素是独生子子元素，而非有唯一子元素的父元素。
:only-of-type
如果要选择第某类特定的子元素(p) 在兄弟节点中是此类元素唯一个的话 就需要用到这个属性了
8、
:enabled 可用的元素
:disabled 不可用的元素
在web的表单中，有些表单元素有可用（“enabled”）和不可用（“disabled”）状态，比如输入框，密码框，复选框等。在默认情况下，这些表单元素都处在可用状态。那么我们可以通过伪类选择器 enabled 进行选择，disabled则相反。
<style> input:enable{ background: red; } </style> </head> <body> <input type="text" name="name"> <input type="text" name="age"> //两部分都变成红色
<input type="text" name="name">
<input type="text" name="age" disabled>
//最后一个不可选
<style>
input:enable{
background: red;
}
input:disabled{
background: blue;
}
</style>
</head>
<body>
<input type="text" name="name">
<input type="text" name="age" disabled>
9、
:checked 选择框的被选中状态
注：checkbox, radio 的一些默认状态不可用属性进行改变，如边框颜色。
<style> input:checked{ 100px; height:100px; } //选中后的样式 </style> </head> <body> <input type="checkbox"> <input type="radio">
10、
:read-only 选中只读的元素
eg:<input type=“text” readonly=“readonly”/>
:read-write 选中非只读的元素
eg:<input type=“text”/>
三、伪元素选择器
CSS3对伪元素进行了一定的调整，在以前的基础上增加了一个: 也就是现在变成了::first-letter,::first-line,::before,::after 另外还增加了一个::selection
（伪元素的效果是需要通过添加一个实际的元素才能达到的。）
1、::selection
“::selection” 选择器是用来匹配突出显示的文本（用鼠标选择文本的时候）。浏览器默认情况下，用鼠标选择网页文本是以“蓝色的背景，白色的字体”显示的。
<style> div::selection{ background:yellowgreen; } </style> </head> <body> <div>风不停留何苦绕来摇晃灯火</div>
如设置成属性：user-select: none; 为不允许用户选择
div{ user-select: none; //不允许用户选择 }
::first-line 第一行
<style> div{ 100px; height:100px; } p::first-line{ background:blueviolet; } //选择p标签内文字第一行 </style> </head> <body> <div> <p>笛声半山腰，而你在哪座桥，远远对他在微笑</p> </div>
::first-letter 第一个字符
p::first-letter{ font-size:20px; } //第一个字符变大
::before ::after
//标签前面添加样式 //伪元素—— 可以通过标签/html实现效果 p::before{ content:'歌词：'; }
四、条件选择器
E > F an F element child of an E element 直接子元素
E + F an F element immediately preceded by an E element 后面的紧挨着的兄弟节点
E ~ F an F element preceded by an E element 后面的兄弟节点
练习：手风琴效果