什麼是最全的CSS hack？這就是最全的CSS hack沒有之一！

1、何為HACK？

簡單的說，HACK就是只有特定瀏覽器才能識別這段hack代碼。Hack也可以說是讓前端最為頭疼的問題，因為要寫N多種兼容代碼。當然，IE是最讓人蛋疼的。

一般來說，CSS HACK有3種表現形式：

CSS屬性前綴法：：比如 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，IE6~IE10都認識"9"，但firefox對前面三個都不能認識。

• CSS選擇器前綴法：比如 IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。

• IE條件注釋法：針對所有IE， <!--[if IE]>IE瀏覽器顯示的內容 <![endif]-->。比如：針對IE6及以下版本： <!--[if lt IE 6]>只在IE6-顯示的內容 <![endif]-->。這類Hack不僅對CSS生效，對寫在判斷語句裡面的所有代碼都會生效(註：IE10+已經不再支持條件注釋)。

下面將對這三種形式一一分析！

2、CSS 屬性前綴法

這裡提供一個測試實例（所有下面的代碼都可以在這個實例里找到）：測試實例

（1）IE6（_）

.test1 { _color: red; }

（2）IE7及其以下版本（*）

如下設置，IE7及其以下版本中都會生效：

.test2 { *color: yellow; }

如果是在選擇器上設置，則只會在IE6中生效：

*html .test { color: gold; }

（3）IE6/IE7/IE8（9）

網上的資料說只有IE6/IE7/IE8中生效，可是經測試，在IE9/IE10中也同樣生效（如果知道原因的，請告知）：

.test3 { color: purple9; }

（4）IE8/IE9/IE10/IE11（）

在IE8/IE9/IE10/IE11中生效： .test4 { color: green; }

（5）IE6（-）

在IE6中生效：.test5 { -color: pink; }

（6）IE6/IE7（+）

在IE6/IE7中生效：.test6 { +color: gold; }

（7）IE6/IE7（*+）

如果在類的屬性上加，會在IE6/IE7都生效：.test7 { *+color: blue; }

如果在選擇器上加，只會在IE7生效：*+html .test { color: black; }

（8）!important

除了IE6，其他瀏覽器中都生效：.test8 { color: #fff !important; }

（9）IE9/IE10（9）

.test9 { color: orange9; }

一般寫HACK的順序：從最新版本到低版本，比如：新版本、IE（10/9/8）、IE（7/6）

color: black; /* 所有 */

color: white !important; /* 除了IE6外 */

color: orange9; /* IE 9/10 */

color: green; /* IE 8/9/10 */

*color: yellow; /* IE6/7 */

+color: gold; /* IE6/7 */

*+color: blue; /* IE6/7 */

_color: red; /* IE6 */

3、CSS選擇器前綴法

（1）*

只在IE6中生效：

*html .test21 { color: gold; }

（2）*+

只在IE7中生效：

*+html .test22 { color: blue; }

（3）IE6/IE7

在IE6/IE7中生效：

@media screen9 {

.test23 { color: purple; }

}

（4）IE6/IE7/IE8

在IE6/IE7/IE8中生效：

@media screen,screen9 {

.test24 { color: gold; }

}

（5）IE8

在IE8中生效：

@media screen {

.test25 { color: orange; }

}

（6）IE8/IE9/IE10/IE11

在IE8/IE9/IE10/IE11中生效：

@media screen {

.test26 { color: green; }

}

（7）IE9/IE10/IE11

在IE9/IE10/IE11中生效：

@media screen and (min-width: 0) {

.test27 { color: red; }

}

4、條件注釋

下面的N表示版本。

（1）IE

<!--[if IE]> 所有IE中生效 <![endif]-->

（2）IE N

比如：只在IE 7中生效：

<!--[if IE 7]> 只在IE7生效 <![endif]-->

注意：版本之間要留空格，比如：IE7是無效的，應該是IE 7。

（3）gt

gt符號表示大於運算符。比如：在IE7以上（不包含IE7）生效

<!--[if gt IE 6]> 在IE6以上生效 <![endif]-->

（4）!

!符號表示非運算符。比如：在IE 6上不生效

<!--[if ! IE 6]> 在IE6上不生效（非IE6生效） <![endif]-->

也可以這樣（所有IE都不生效）：

<!--[if ! IE]> 所有IE中都不生效（非IE生效） <![endif]-->

（5）lt

lt符號表示小於運算符。比如：IE6以下（不包含IE6）版本

<!--[if lt IE 6]> IE6以下可生效 <![endif]-->

（6）lte

lte符號表示小於或等於運算符：

<!--[if lte IE 6]> IE6及IE6以下可生效 <![endif]-->

（7） gte

gte符號表示大於或等於運算符：

<!--[if gte IE 6]> IE6及IE6以上可生效 <![endif]-->

（8）&

&符號表示AND運算符：

<!--[if (gt IE 6)&(lt IE 8)]> IE6版本以上且IE8版本以下可生效 <![endif]-->

（9） |

|符號表示OR運算符：

<!--[if (IE 6)|(IE 7)]> IE6或IE7可生效 <![endif]-->

註：IE10+已經不再支持條件注釋。

5、針對其他瀏覽器的HACK

（1）針對火狐

只在火狐中有效：

@-moz-document url-prefix() {

.test { color: red; }

}

（2）支持所有Gecko內核的瀏覽器（包括火狐）

*>.test { color: blue; }

（3）針對Webkit內核瀏覽器

@media all and (min-width:0px) { color: purple; }

6、CSS選擇器的優先順序

相同權值情況下，CSS樣式的優先順序是：就近原則（也就是相同權值的，後設置的優先）：

.a { color: red; }

.b { color: blue; }

<div class="b a">我會是藍色的，而不是紅色</div>

優先順序規則：

• 內聯樣式 > 嵌入樣式 > 外部樣式

• ID（100） > 類選擇符（10） > 標籤（1） > 通配選擇器（*）

在支持！important的情況下，其優先順序最高。

文章摘自博客園

更多IT精品課程，訪問中公優就業官網：http://xue.ujiuye.com

勤工儉學計劃」，給你一個真正0元學習IT技術的機會！

http://www.ujiuye.com/zt/qgjx/?wt.bd=lsh

找工作太難？不是你不行，我們來幫你！

http://www.ujiuye.com/zt/jyfc/?wt.bd=lsh

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！