各位朋友大家好,今天筆者繼續爲大家分享IE10 下CSS3樣式表系列教程,繼上文：詳解IE10 下CSS3 3D變換(3D transfrom)及實例教程
(http://blog.csdn.net/liwei3gjob/article/details/8865874)，CSS的選擇器，我想大家並不會陌生吧，因爲天天在使用，但對於CSS3的選擇器，要運用的靈活到位，我想對很多朋友還是一定的難度，所以筆者從CSS3選擇器、CSS動畫（Animations）效果基礎開始爲大家進行歸納總結，並附上實例源代碼。
什麼是選擇器?
CSS是一種用於屏幕上渲染html，xml等一種語言，CSS主要是在相應的元素中應用樣式，來渲染相對應用的元素，那麼這樣我們選擇相應的元素就很重要了，如何選擇對應的元素，此時就需要我們所說的選擇器。
CSS選擇器是個難以置信地強大的工具：它們允許我們在標籤中指定特定的HTML元素而不必使用多餘的 class、 ID 或JavaScripts。而且它們中的大部分並不是CSS3中新添加的，而是沒有被得到應有的廣泛應用。如果你在嘗試實現一個乾淨的、輕量級的標籤以及 結構與表現更好的分離，高級選擇器是非常有用的。它們可以減少在標籤中的class和ID的數量並讓設計師更方便的維護樣式表。
選擇器的分類:
選擇器主要是用來確定html的樹形結構中的DOM元素節點。我把CSS選擇器分開成三部分：
第一部分是我們常用的部分，我把他叫做基本選擇器；
第二部分我把他稱作是屬性選擇器；
第三部分我把他稱作僞類選擇器,如下圖:
IE瀏覽器各歷史版本和其他瀏覽器對CSS3選擇器兼容性對比
綜合實例:
<style type="text/css">
li{padding:10px;}
input[name^="news"]{
border:1px solid #F60;
}
ol li:nth-child(3n+1){
background:#EEE;
}
ol li:nth-child(3n+2){
background:#666;
}
input:disabled{
background:#EEE;
}
div:target{
background:#F60;
}
ol~div{
margin:5px 0;
background:#EEE;
padding:10px;
}
div:not(#note){
margin:10px 0;
border:1px solid #CCC;
padding:10px;
border-radius:5px;
}
</style>
<input name="newsletter" value="name=newsletter" />
<input name="milkman" disabled="disabled" value="name=milkman"/>
<input name="newsboy" value="name=newsboy" />
<div id="webt">前端工程師要學習的內容主要有：</div>
<ol>
<li>JavaScript</li>
<li>CSS</li>
<li>HTML</li>
<li>Ajax</li>
<li>JSON</li>
<li>XML</li>
<li>jQuery</li>
</ol>
<div id="note">ol li:nth-child(3n+1)表示匹配索引（從1開始）爲3n+1的li元素，n可取0、1、2、3...等。E:nth-child(n)中n還爲odd（奇數）、even（偶數）</div>
IE10 對CSS3兼容情況
微軟公開說明IE10預覽版已經支持CSS3屬性 Transitions, Transforms 和 Animations，你可以直接寫transitions，而不是加個噁心的前綴-ms-，這是一個大的進步，也將激發更多瀏覽器廠商儘快普及支持更多CSS3。你一定認爲這是微軟給前端開發者的一個驚喜，的確，這是微軟少有的積極，應該支持。相信不少同學已經使用過了這幾個CSS3屬性，Transitions是設定一個時間，然後可以進行一些平滑的動畫操作；Transforms是變形轉換，這個也非常多用；Animations是動畫，也是下面我們中間分析的內容。
IE 10提供了足夠豐富的CSS支持，在許多新的CSS工具中都提供了動畫、過渡和轉換。IE 10還對下一代佈局工具提供了實驗性支持，例如CSS網格佈局、CSS多列布局和CSS區域。
IE10 下CSS3動畫（Animations）特效
隨着CSS3越來越熱，CSS3動畫也逐漸受到大家的關注。
CSS3裏的動畫特效。不用任何的Javascript，只用純CSS，你就能實現令人相當吃驚的動畫效果，甚至是3D動畫效果。下面跟隨筆者一起使用IE10 觀看一個經典的CSS3動畫效果（http://andrew-hoyer.com/experiments/walking/）
CSS3演示人行走的動畫
CSS中的動畫分爲三種：
變形(transformation)、變換(transition)和動畫(animation)
rotate 傳遞一個度數值來轉動一個對象。
scale Scale是一個縮放功能，可以讓任一元素變的更大。
translate 基於X和Y 座標重新定位元素
skew skew就是要將對象傾斜，參數是度數
matrix
transform支持矩陣變換，就是基於X和Y 座標重新定位元素
1）變形(transformation)實例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS3動畫</title>
<meta name="author" content="" />
<meta name="copyright" content="" />
<style>
body{ font-family:"微軟雅黑"; font-size:12px;}
h1{font-size:16px;}
.test{overflow:hidden;width:100%;margin:0;padding:0;list-style:none;}
.test li{float:left;width:200px;height:30px;margin:5px 5px; line-height:30px; border:1px solid #ddd;background-color:#eee;text-align:center;-moz-transition:width .2s ease-in;-webkit-transition:width .2s ease-in;-o-transition:width .2s ease-in;transition:width .2s ease-in;}
.test li:nth-child(1):hover{width:250px;}
.test li:nth-child(2):hover{width:300px;}
.test li:nth-child(3):hover{width:350px;}
.test li:nth-child(4):hover{width:400px;}
.test li:nth-child(5):hover{width:450px;}
button {cursor:pointer;outline:none;blr:expression(this.hideFocus=true);border-style: solid;border-width: 1px 1px 1px 0;border-color: #e2e2e2;height: 26px;line-height: 26px; float:left}
input {vertical-align:middle;border-style: solid;border-width: 1px;border-color: #BCBCBC #E7E7E7 #E7E7E7 #BCBCBC;height: 24px;line-height: 24px;padding: 0 3px; float: left;}
.forma{ margin:5px 5px;}
.forma input{ width:125px;-moz-transition:width .2s ease-in;-webkit-transition:width .2s ease-in;-o-transition:width .2s ease-in;transition:width .2s ease-in;}
.forma input:hover{ width:250px;}
.forma button{ width:60px;-moz-transition:.2s;-webkit-transition:.2s;-o-transition:.2s;transition:.2s; background-color:#ffffff;}
.forma button:hover{ background-color:#ececec}
</style>
</head>
<body>
<h1>請將鼠標移動到下面的矩形上：</h1>
<ul class="test">
<li>寬度過渡</li>
<li>寬度過渡</li>
<li>寬度過渡</li>
<li>寬度過渡</li>
<li>寬度過渡</li>
</ul>
<form class="forma">
<input type="text"/>
<button>搜索</button>
</form>
</body>
</html>
2）transition(轉換)
一個涉及到CSS屬性的基本的轉換就是：定義和移動一個元素從它的靜止狀態到它的hover或者激活狀態(比如，背景變化)。
轉換可以和變形同時使用(以及引發諸如:hover 或:focus事件)以創建一些動畫。
transition-property 指定轉換的CSS屬性名稱 比如:將轉換應用於background-color屬性。
transition-duration 定義轉換花費的時間
transition-timing-function 可以理解爲過度效果。
transition-delay 轉換延遲的時間。
像transform屬性一樣酷，但是目前只有WebKit瀏覽器支持
Opera 10.5 pre版本也可以通過添加-o-前綴來支持。
-moz-transition已經在Firefox 中可用。
你也可以添加-moz-transition到你的CSS中以實現將來的增強。甚至可以添加一個不用私有前綴的屬性，以防萬一。
可轉換屬性：http://www.w3.org/TR/css3-transitions/
變換(transition)實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IE10 下CSS3選擇器及動畫(animation)效果實例教程-liwei3gjob</title>
<style>
div {
background-color: red;
}
@-webkit-keyframes mycolor {
0% {
background-color: red;
}
40% {
background-color: darkblue;
}
70% {
background-color: yellow;
}
100% {
background-color: darkblue;
}
}
div:hover {
-webkit-animation-name: mycolor;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
}
</style>
</head>
<body>
<div>IE10 下CSS3選擇器及動畫(animation)效果實例教程-liwei3gjob</div>
</body>
</html>效果
3）Animation(動畫)
動畫是CSS 3最有用的地方。你可以將我們在上面討論的所有的元素與動畫屬性 比如animation-duration、animation-name 和animation-timing-function 整合以創建像Flash動畫一樣的效果——純CSS。
animation-name 動畫的名稱。
animation-duration 定義動畫播放一次需要的時間。默認爲0；
animation-timing-function 定義動畫播放的方式，參數設置類似transition-timing-function
animation-delay 定義動畫開始的時間
animation-iteration-count 定義循環的次數，infinite即爲無限次。默認是1。
-webkit-animation-direction 動畫播放的方向，兩個值，默認爲normal，向前播放。另一個值是alternate，則第偶數次向前播放，第奇數次向反方向播放。
案例源碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IE10 下CSS3選擇器及動畫(animation)效果實例教程-blog.csdn.net/liwei3gjob</title>
<style>
div {
top: 100px;
position: absolute;
width: 500px;
background-color: yellow;
}
@-webkit-keyframes 'wobble' {
0% {
background-color: red;
-webkit-transform: rotate(0deg);
}
40% {
background-color: darkblue;
-webkit-transform: rotate(30deg);
}
70% {
background-color: yellow;
-webkit-transform: rotate(-30deg);
}
100% {
background-color: red;
-webkit-transform: rotate(0deg);
}
}
div:hover {
-webkit-animation-name: wobble;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
}
</style>
</head>
<body>
39 <div>IE10 下CSS3選擇器及動畫(animation)效果實例教程-blog.csdn.net/liwei3gjob</div>
40 </body>
41 </html>效果如下:
總結：現在，讓所有瀏覽器支持這些很棒的屬性可能需要一個很長的過程。不用等待那一天的到來，我們可以先使用一些嚴謹的漸進增強以及Javascript來增強我們的網站和應用。
