1、相鄰兄弟選擇器，通用兄弟選擇器
相鄰兄弟選擇器：#d1+p{color:red} //緊挨着#d1後面的第一個且必須爲p的標籤，文字顏色變爲red
通用兄弟選擇器：#d1~p{color:red} //#d1後面所有爲p的標籤，文字顏色變爲red
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;} div{-color:red;}
-: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]-->
③主流瀏覽器內核及屬性前綴
|
瀏覽器 |
內核 |
屬性前綴 |
|
Chrome/safari(蘋果) |
webkit |
-webkit |
|
Firefox |
Gecko |
-moz |
|
IE/國內各瀏覽器 |
trident |
-ms |
|
Opera |
opera |
-o |
CSS3中的屬性大多需要加這些前綴，否則無法出現效果，
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慢快慢|ease-in慢快|ease-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，即使是空的，還會請求服務器，#不會
⑥別再頁面中改變圖片大小