主要内容：
1.CSS選擇器、優先級與比對原理
2.CSS引入的方式有哪些? link和@import的差別是?
3.CSS hack
4.如何書高效CSS
一、CSS選擇器、優先級與比對原理
CSS選擇器大概可以分為：1.id選擇器(#myid)
2.類選擇器(.myclassname) 3.标簽選擇器(div,h1,p) 4.相鄰選擇（h1+p）6.後代選擇器（li
a）7.通配符選擇器(*) 8.屬性選擇器(a[rel=‘externaml‘]) 9.僞類選擇器(a:hover)
選擇器安類型分可以分為：元素選擇器、關系選擇器、僞類選擇器、屬性選擇器、僞對象選擇器
1.1 元素選擇器
選擇符
類型
版本
簡介
*
通配選擇符
CSS2
所有元素對象
E
類型(HTML)選擇符
CSS1
以文檔語言對象類型作為選擇符
E#myid
id選擇符
以唯一辨別符id屬性等于myid的E對象作為選擇符
E.myclass
class選擇符
以class屬性包含myclass的E對象
備注：E是Element的縮寫,表示元素的意思
1.2 關系選擇器
E F
包含選擇符
選擇所有被E元素包含的F元素
E>F
子選擇符
選擇所有作為E元素的所有直接子元素F，
E+F
相鄰選擇符
選擇緊帳号在E元素之後F元素
E~F
兄弟選擇符
CSS3
選擇E元素所有兄弟元素F
1.3 屬性選擇器
舉例
E[att]
選擇具有att屬性的E元素
E[att="val"]
選擇具有att屬性值等于val的E元素
E[att～="val"]
選擇具有att屬性且屬性值為用空格分隔的字詞清單，其中一個等于val的E元素。
E[att|="val"]
選擇具有att屬性且屬性值為以val開頭并用連接配接符"-"分隔的字元串的E元素。
E[att^="val"]
選擇具有att屬性且屬性值為以val開頭的字元串的E元素。
E[att$="val"]
選擇具有att屬性且屬性值為以val結尾的字元串的E元素。
E[att*="val"]
選擇具有att屬性且屬性值為包含val的字元串的E元素。
1.4 僞類選擇器
E:link
設定超連結a在未被通路前的樣式。
E:visited
設定超連結a在其連結位址已被通路過時的樣式。
E:hover
CSS1/CSS2
設定元素在其滑鼠懸停時的樣式。
E:active
設定元素在被使用者激活（在滑鼠點選與釋放之間發生的事件）時的樣式。
E:focus
設定元素在成為輸入焦點（該元素的onfocus事件發生）時的樣式。
E:lang()
比對使用特殊語言的E元素。
E:not()
比對不含有s選擇符的元素E。
E:root
比對E元素在文檔的根元素。
E:fist-child
比對父元素的第一個子元素E。
E:last-child
比對父元素的最後一個子元素E。
E:only-child
比對父元素僅有的一個子元素E。
E:nth-child(n)
比對父元素的第n個子元素E。
E:nth-last-child(n)
比對父元素的倒數第n個子元素E。
E:first-of-type
比對同類型中的第一個同級兄弟元素E。
E:last-of-type
比對同類型中的最後一個同級兄弟元素E。
E:only-of-type
比對同類型中的唯一的一個同級兄弟元素E。
E:nth-of-type(n)
比對同類型中的第n個同級兄弟元素E。
E:nth-last-of-type(n)
比對同類型中的倒數第n個同級兄弟元素E。
E:empty
比對沒有任何子元素（包括text節點）的元素E。
E:checked
比對使用者界面上處于選中狀态的元素E。(用于input
type為radio與checkbox時)
E:enabled
比對使用者界面上處于可用狀态的元素E。
E:disabled
比對使用者界面上處于禁用狀态的元素E。
E:target
比對相關URL指向的E元素。
@page:first
設定頁面容器第一頁使用的樣式。僅用于規則
@page:left
設定頁面容器位于裝訂線左邊的所有頁面使用的樣式。僅用于規則
@page:right
設定頁面容器位于裝訂線右邊的所有頁面使用的樣式。僅用于規則
1.5 僞對象選擇器
CSS1/CSS3
設定對象内的第一個字元的樣式。
設定對象内的第一行的樣式。
CSS2/CSS3
設定在對象前（依據對象樹的邏輯結構）發生的内容。用來和content屬性一起使用
設定在對象後（依據對象樹的邏輯結構）發生的内容。用來和content屬性一起使用
設定對象被選擇時的顔色。
計算指定選擇器的優先級：重新認識CSS的權重
通配選擇符的權值 0,0,0,0
标簽的權值為 0,0,0,1
類的權值為 0,0,1,0
屬性選擇的權值為 0,0,1,1 0,0,1,0
僞類選擇的權值為 0,0,1,0
僞對象選擇的權值為 0,0,0,1
ID的權值為 0,1,0,0
important的權值為最高 1,0,0,0
使用的規則也很簡單，就是
選擇器的權值加到一起，大的優先；如果權值相同，後定義的優先
。雖然很簡單，但如果書寫的時候沒有注意，很容易就會導緻CSS的重複定義，代碼備援。
從上面我們可以得出兩個關鍵的因素：
權值的大小跟選擇器的類型和數量有關
樣式的優先級跟樣式的定義順序有關
總結：
比較同一級别的個數，數量多的優先級高，如果相同即比較下一級别的個數 ，至于各級别的優先級，大家應該已經很清楚了，就是：
important > 内聯 > ID > 類 >
标簽 | 僞類 | 屬性選擇 > 僞對象 > 繼承 > 通配符 通配符 > 繼承
這也就解釋了為什麼11個标簽的定義會比不上1個類的定義，1個類加11個标簽會比不上2個類的權重高。
二.CSS引入的方式有哪些? link和@import的差別是?
共有四種引入方式分别是：
1.使用STYLE屬性，将STYLE屬性直接加在個别的元件标簽裡（如：TD
STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷體";
line-height:150%>
這種用法的優點是可靈巧應用樣式于各标簽，但是缺點則是沒有整篇檔案的【統一性】）
2. 使用STYLE标簽 将樣式規則寫在<STYLE>...</STYLE>标簽之中。
(如：<STYLE TYPE="text/css"> <!-- body {color: #666;background: #f0f0f0;font-size: 12px;} td,p {color:#c00;font-size: 12px;} --> </STYLE>
這種用法的優點就是在於整篇檔案的統一性，隻要是有聲明的的元件即會套用該樣式規則。缺點就是在個别元件的靈活度不足。
)
3. 使用 LINK标簽 将樣式規則寫在.css的樣式檔案中，再以<link>标簽引入。(如：
<link rel=stylesheet type="text/css" href="example.css">
這種用法的優點就是在於可以把要套用相同樣式規則的數篇檔案都指定到同一個樣式檔案即可。缺點也是在個别檔案或元件的靈活度不足。
2. 使用@import引入 跟link方法很像，但必須放在<STYLE>...</STYLE> 中 <STYLE TYPE="text/css"> <!-- @import url(css/example.css); --> </STYLE>
三.CSS
hack
3.1 什麼是CSS hack
由于不同的浏覽器，甚至同一浏覽器的不同版本對CSS的解析認識不一樣，導緻生成的頁面效果不一緻，寫出針對不同浏覽器CSS code就稱為CSS hack。
常用的CSS hack 有三種：條件Hack、屬性級Hack、選擇符級Hack
條件Hack
文法：
<code><!--[if <keywords>? IE <version>?]> HTML代碼塊 <![endif]--></code>
取值：
<keywords>
if條件共包含6種選擇方式：是否、大于、大于或等于、小于、小于或等于、非指定版本
是否：指定是否IE或IE某個版本。關鍵字：空
<dl></dl>
<dt> 大于：選擇大于指定版本的IE版本。關鍵字：gt（greater</dt>
than）
<dt></dt>
<dt> 大于或等于：選擇大于或等于指定版本的IE版本。關鍵字：gte（greater</dt>
than or equal）
<dt> 小于：選擇小于指定版本的IE版本。關鍵字：lt（less than）</dt>
<dt> 小于或等于：選擇小于或等于指定版本的IE版本。關鍵字：lte（less</dt>
<dt> 非指定版本：選擇除指定版本外的所有IE版本。關鍵字：!</dt>
<dt> </dt>
<dt>示例：</dt>
View Code
屬性Hack
示例：
選擇符級Hack
示例代碼：
CSS Hack 的順序
使用 Firefox 作為平台, 隻要代碼寫得夠标準, 其實要 Hack 的地方不會很多的, IE
以外的浏覽器幾乎都不會有問題, 是以可以暫時忽略,順序如下：Firefox -> IE6 -> IE7 -> 其他
四、關于CSS的執行效率
樣式系統從最右邊的選擇符開始向左進行比對規則。隻要目前選擇符的左邊還有其他選擇符，樣式系統就會繼續向左移動，直到找到和規則比對的元素，或者因為不比對而退出。
如果你非常在意頁面的性能那千萬别使用CSS3選擇器。實際上，在所有浏覽器中，用 class 和 id
來渲染，比那些使用同胞，後代選擇器，子選擇器（sibling, descendant and child
selectors）對頁面性能的改善更值得關注。
ID最快，Universal最慢 有四種類型的key
selector，解析速度由快到慢依次是：ID、class、tag和universal
不要tag-qualify （永遠不要這樣做 ul#main-navigation { }
ID已經是唯一的，不需要Tag來辨別，這樣做會讓選擇器變慢。）
後代選擇器最糟糕（換句話說，下面這個選擇器是很低效的： html body ul li a { }）
CSS3的效率問題（CSS3選擇器（比如
:nth-child）能夠漂亮的定位我們想要的元素，又能保證我們的CSS整潔易讀。但是這些神奇的選擇器會浪費很多的浏覽器資源。）
Google 資深web開發工程師Steve Souders對CSS選擇器的效率從高到低做了一個排序：
1.id 選擇器（#myid）2.類選擇器
（.myclassname）3.标簽選擇器（div,h1,p）4.相鄰選擇器（h1+p）5.子選擇器（ul < li）6.後代選擇器（li
a）7.通配符選擇器（*）8.屬性選擇器（a[rel="external"]）9.僞類選擇器（a:hover,li:nth-child）
上面九種選擇器中ID選擇器的效率是最高，而僞類選擇器的效率則是最低
詳細的介紹大家還可以點選。
以上内容都本人從部落格園和其它相關資料總結出來的，希望對家有幫忙，有寫的不對地方請大家多諒解，謝謝！！
![在DOS下運作不了ipconfig指令[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)