1、相鄰兄弟選擇器，通用兄弟選擇器

2、屬性選擇器，理解下面語句

①[id]{color:red;}                                ②div[id]{color:red;}

③p[id][class]{color:red;}                          ④input[type=text]{color:red;}

⑤div[class~=heavy]{color:red;}                     ⑥[class^=”col-”]{color:red;}

⑦[class*=”col-”]{color:red;}                        ⑧[class$=”col-”]{color:red;}

3、目標偽類target使用

html  <a href="#dd">點我跳轉到div</a> <br/><div id="dd">字型顏色發生變化</div>

css   #dd:target{ color:red;}

4、元素狀態偽類解釋 ①enable  ②disable  ③checked

5、結構偽類       li:first-child{color: red;}與li{color: red;} 區別

                  li:last-child{color: red;}

                  li:nth-child(2){color: purple;}

6、否定偽類       li:not(:first-child){color:red;}

7、偽元素選擇器  p:first-line

                 p:first-letter

                 p.article:first-letter{color: #FF0000;}

<p class="article">This is a paragraph in an article。</p>

8、使用偽元素選擇器實現內容生成

標籤內容區域前插入文字：標籤:before{content:"插入的內容";}

標籤內容區域前插入圖片：標籤:before{content:url(...);}

標籤內容區域後插入文字：標籤:after{content:"插入的內容";}

標籤內容區域後插入圖片：標籤:after{content:url(...);}

9、使用選擇器插入專案編號

元素:before{content:counter(計數器);}

元素{counter-increment:content屬性值中所指定的計數器名稱}

使用計數器來計算編號，計數器可以任意命名，除了使用計數器還需要在元素的樣式中追加對元素的(counter-increment)屬性指定為content屬性值中所指定的計數器名稱。
      p:before{content: "第"counter(number)"章、";}

p{counter-increment: number;}

10、CSS  Hack 針對不同瀏覽器編寫不同的CSS檔案

①CSS類內部hack：在樣式屬性名或值前後增加前後綴識別不同瀏覽器（div{color:red\9\0;}）

-:IE 6           +:IE 6,7            \0:IE 8,9,10         \9\0:IE 9,10

②頭部引用Hack

<!--[if IE]>這段文字只在IE瀏覽器顯示<![endif]-->

<!--[if IE 6]>這段文字只在IE6瀏覽器顯示<![endif]-->

<!--[if gte IE 6]>這段文字只在IE6及以上版本IE瀏覽器顯示<![endif]-->

<!--[if ! IE 8]>這段文字在非IE8瀏覽器顯示<![endif]-->

③主流瀏覽器核心及屬性字首 

11、webkit核心的Chrome和Safari使用CSS3屬性大都需要加上-webkit-字首，最好把其餘字首的都重寫一遍

12、轉換：改變元素在頁面中的大小，位置，形狀，角度的一種方式

①2D轉換

移動    transform:translate(50px,50px);/*translateX(),translateY()*/

縮放    transform:scale(2); /*scaleX(),scaleY()*/

旋轉    transform:rotate(45deg);

旋轉原點transform-origin:left top; /*也可以用百分比transform-origin:20% 40%;*/

傾斜    transform:skew(45deg); /*skewX(),skewY()*/

多種效果同時實現transform:translate(100px,100px) scale(2) rotate(5deg) skewY(45deg);

                transform-origin:right top;

②3D轉換

3D位移：包括translateZ()和translate3d()兩個功能函式；
3D旋轉：包括rotateX()、rotateY()、rotateZ()和rotate3d()四個功能函式；
3D縮放：包括scaleZ()和scale3d()兩個功能函式；

③利用3D轉換製作一個正方體

12、過渡 過渡設定簡寫 transition:

property（要使用過渡效果的屬性）

duration（過渡時長）   

timing-function（過渡時間速率|ease慢快慢| linear勻速|ease-in-out慢快慢）

delay（過渡延時）

案例   HTML： <div></div>

       CSS：

 div{

       width: 200px;height: 200px;

       background-color: purple;

       transition: transform 3s;

      }

div:hover{ transform: translateX(400px) rotateY(90deg) rotate(360deg); }

13、動畫

①宣告

第一種宣告：@keyframes 動畫名稱{

0%{動畫開始時的樣式}    50%{動畫中間時的樣式}     100%{動畫結束時的樣式}

}

0%時也可以用from，100%用to

第二種宣告：@keyframes 動畫名稱{

from{動畫開始時的樣式}    to{動畫結束時的樣式}

}

②呼叫（一般在hover中呼叫，如果想頁面一執行就有，在元素的樣式中呼叫）

animate:name(呼叫的動畫的名稱)

duration(動畫完成一個週期的時間)

timing-function（過渡時間速率|ease慢快慢| linear勻速|ease-in-out慢快慢）

play-state(規定動畫是播放還是暫停，paused暫停，running播放)

iteration-count(規定播放次數n  infinite一直迴圈播放)    

14、CSS程式碼優化

①提前定義統一樣式，利用CSS的繼承性

②儘量縮小樣式檔案（簡寫屬性，空格回車少些）

③避免樣式重寫

④程式碼壓縮（使用程式碼壓縮軟體）

⑤避免空的src和href，即使是空的，還會請求伺服器，#不會

⑥別再頁面中改變圖片大小