選取器的密技 ( Selector Hacks )
選取器類型的 Hacks 就是找出不同瀏覽器之間解析 選取器 (Selector) 的瑕疵來判別不同的瀏覽器或版本，這種類型的 Hacks 不止 IE 專屬，你還可以將這種類型的 Hacks 運用在其他的瀏覽器裡，而這裡的語法也比 CSS Attribute Hacks 的語法更奇怪。
只有 IE6 才能解析的選取器，在選取器名稱之前加上 * html
* html #style1 { color: red }
只有 IE7 才能解析的選取器，在選取器名稱之前加上 *+html 或 *:first-child+html
*+html #style1 { color: red }
*:first-child+html #style1 { color: red }
只有 IE8 才能解析的選取器，在整個 CSS 樣式規則前後用以下 @media \0screen 定義
@media \0screen {
.style1 {color: red;}
}
只有 IE9 才能解析的選取器搭配屬性 Hack，在選取器名稱之前加上 :root 與屬性值後面加上 \9
:root #style1 {color: #FF0000\9;}
只有 IE7, Firefox, Safari, Opera 才能解析的選取器，在選取器名稱之前加 html>body
html>body #style1 { color: red }
只有 IE8, IE9, Firefox, Safari, Opera 才能解析的選取器，在選取器名稱之前加 html>/**/body
html>/**/body #style1 { color: red }
只有 Opera 9.27 以下與 Safari 2 才能解析的選取器，在選取器名稱之前加 html:first-child
html:first-child #style1 { color: red }
只有 Safari 2 ~ 3 才能解析的選取器，在選取器名稱之前加 html[xmlns*=""] body:last-child
html[xmlns*=""] body:last-child #style1 { color: red }
只有 Safari 3+, Chrome 1+, Opera9+, Firefox 3.5+才能解析的選取器，在選取器名稱之前加 body:nth-of-type(1) 或 body:first-of-type
body:nth-of-type(1) #siete { color: red }
body:first-of-type #ocho { color: red }
只有 Safari 3+, Chrome 1+ 才能解析的選取器，在整個 CSS 樣式規則前後用以下 @media 定義
@media screen and (-webkit-min-device-pixel-ratio:0) {
#style1 { color: red }
}
只有 iPhone 與 Mobile Webkit 的瀏覽器才能解析的選取器
@media screen and (max-device-width: 480px) {
#style1 { color: red }
}
只有 Safari 2 ~ 3.1 才能解析的選取器，在選取器名稱之前加 html[xmlns*=""]:root
html[xmlns*=""]:root #style1 { color: red }
只有 IE6, IE7, IE8 才無法解析的選取器，在選取器名稱之前加 :root *>
:root *> #style1 { color: red }
只有 Firefox 1.0+ 才看的懂得選取器，在選取器名稱後面加上 , x:-moz-any-link
#veinticuatro, x:-moz-any-link { color: red }
只有 Firefox 3.0+ 才看的懂得選取器，在選取器名稱後面加上 , x:-moz-any-link, x:default
#veinticuatro, x:-moz-any-link, x:default { color: red }
只有 Firefox 3.5+ 才看的懂得選取器，在選取器名稱前面加 body:not(:-moz-handler-blocked)
body:not(:-moz-handler-blocked) #veinticuatro { color: red }
說實在的，這些 Hacks 語法真有點複雜，但當 網頁設計 師被客戶要求克服各種瀏覽器版本的樣式差異時，也不得不學會這些密技才能滿足客戶要求。但話說回來，一般客戶頂多就是要求網頁要能夠相容於 IE6 ~ IE9 這些瀏覽器而已，依照筆者多年來的網頁建置經驗，其他像是 Firefox, Safari, Opera, Chrome 根本不會有相容性的問題，如果有客戶要求你要針對 Firefox, Safari, Opera, Chrome 進行相容性網頁設計，你大可要求客戶升級到最新版，不然還真做不下去了。 ^_^
轉貼來源： Will 保哥的技術交流中心
http://www.piece2ec.com.tw/news.asp?ID=867
參考文獻：
1.鄭政宗，李世昌，林國賢 (2008), 大陸民眾來台旅遊態度與動機研究－以廣州市為例, 休閒暨觀光產業研究, 3(2), 22-46.
2.謝淑芬 (1994), 觀光心理學, 台北市: 五南圖書出版.
3.戴軒廷、馬恆、張紹勳 (2004), 衡量 網路廣告 態度之指標建構, 台灣管理學刊, 4(1), 59-84.
留言列表
