為樣式找到應用目標-CSS選取器

標籤：問題   work   ice   應用   gre   改進   資訊   follow   for   

1，常用選取器：元素（標籤／簡單）選取器、ID選取器、類別選取器、後代選取器（可以將類或者ID應用於它們的祖先，然後使用後代選取器來定位）

2，偽類：有時候，我們需要根據文檔結構之外的其他條件對元素應用樣式，例如表單元素或連結的狀態，可以使用偽類別選取器來完成：

/*makes all unvisited links blue*/a:link { color: blue; }/*makes all visited links green*/a:visited { color: green; }/*makes links red when hovered or actived. focus is added for keyboard support*/a:hover, a:focus, a:active { color: red; }/*makes table rows red when hovered over*/tr:hover { background-color: red; }/*makes input elements yellow when focus is applied*/input:focus { background-color: yellow; }

:link和:visited成為連結偽類，只能應用於錨元素。:hover、:active和:focus稱為動態偽類，理論上可以應用於任何元素，大多數瀏覽器都支援這個功能。但是IE6隻注意應用於錨連結的:active和:hover選取器，完全忽略:focus。IE7在任何元素上都支援:hover，但是忽略:active和:focus。如果不需要相容IE6、IE7，就很好啦。

最後，值得指出的是，通過把偽類連結在一起，可以建立更複雜的行為，比如在已訪問連結和未訪問連結上實現不同的滑鼠移至上方效果。

    /*makes all visited links olive on hover*/    a:visited:hover { color: olive; }

通用選取器：最強大但最少用，在與其他選取器結合使用時，通用選取器可以用來對某個元素的所有後代應用樣式，或者跳過一級後代。

3，進階選取器：

CSS2.1和CSS3有其他許多有用的選取器。不過，雖然現代大多數瀏覽器支援這些進階選取器，但是IE6或更低版本不支援。好在在建立CSS時考慮到了向後相容性。如果瀏覽器不理解某個選取器，那麼它會忽略整個規則。因此，可以在現代瀏覽器中應用樣式和易用性方面的改進。同時不必擔心它在老式瀏覽器中造成問題。但是要記住，在對於網站功能或布局很重要的任何元素上，都應該避免使用這些進階瀏覽器。

3.1 子選取器和相鄰同胞選取器

IE7和更高版本都支援子選取器。但是IE7中有一個小bug，如果父元素和子項目之間有HTM注釋，就會出問題。

在IE6和更低版本中，可以使用通用選取器類比子選取器的效果。為此，先在所有後代上應用你希望子項目具有的樣式，然後，使用通用選取器覆蓋子項目的後代上的樣式。請看下面的例子：

<ul id="nav">    <li><a href="#">Home</a></li>    <li><a href="#">Service</a>        <ul>            <li><a href="#">Design</a></li>            <li><a href="#">Development</a></li>            <li><a href="#">Consultancy</a></li>        </ul>    </li>    <li><a href="#">Contact Us</a></li></ul> 

    #nav li {        background: url(folder.png) no-repeat left top;        padding-left: 20px;    }        #nav li * {        background-image: none;        padding-left: 0;    }

    #nav > li {        background: url(folder.png) no-repeat left top;        padding-left: 20px;    }

上面2中CSS的寫法，效果是一樣的。

相鄰兄弟選取器（Adjacent sibling selector）可選擇緊接在另一元素後的元素，且二者有相同父元素。與子選取器一樣，如果在目標元素之間有注釋，這在IE7中也會出現問題。

3.2 屬性選取器

屬性選取器可以根據某個屬性是否存在或屬性的值來尋找元素，因此能夠實現某些非常有意思和強大的效果。

例如，當滑鼠移至上方在具有title屬性的元素上時，大多數瀏覽器會顯示一個工具提示。可以使用這種特性來解釋某些內容（比如首字母縮拼詞和縮寫詞）的含義：

<p>The term<acronym title="self-contained underwater breathing apparatus">SCUBA</acronym> is an acronym rather than an abbreviation as it is pronounced as
 a word</p>

 但是，如果不把滑鼠移至上方在這個元素上，那麼沒有任何跡象能夠表明存在這一額外資訊。為瞭解決這個問題，可以使用屬性選取器對具有title屬性的acronym元素應用與其他元素不同的樣式——在下面的例子中，在它們下面加上點，還可以在滑鼠移至上方在這個元素上時將滑鼠指標改成問號，表示這個元素與眾不同，從而提供更多的上下文相關資訊。

    acronym[title] {        border-bottom: 1px dotted #999;    }        acronym[title]:hover,    acronym[title]:focus {        cursor: help;    }

 除了根據某個屬性是否存在對元素應用樣式之外，還可以根據屬性值應用樣式。例如，使用rel屬性值nofollow連結的網站無法從Google獲得評級收益（ranking benefit）。以下規則在這種連結旁邊顯示一個映像，以此表示不推薦這個網站：

a[rel=‘nofollow‘] {        background: url(nofollow.gif) no-repeat right center;        padding-right: 20px;    }

 包括IE7的現代瀏覽器都支援這些選取器，然而，由於IE6不支援屬性選取器，可以利用它對IE6應用一種樣式，對更符合標準的瀏覽器應用另一種樣式。例如，AndyClarke利用這種技術為IE6提供網站的黑白版本，為其他瀏覽器提供彩色版本。

    #header {        background: url(branding-bw.png) repeat-y left top;    }        [id=‘header‘] {        background: url(branding-color.png) repeat-y left top;    }

 一些屬性可以有多個值，值之間用空格分隔。屬性選取器允許根據屬性值之一尋找元素。例如，XFN微格式允許在錨連結的rel屬性中添加關鍵字來定義你與網站的關係。假設某個網站屬於我的同事，我就可以在部落格上的連結中添加co-worker關鍵字來表示這一關係。然後可以在這位同事的姓名旁邊顯示一個特殊的表徵圖，以此表明我和這個人一起工作。

.blogroll a[rel~="co-worker"] {    color: #fff;    background: blue;}

    <ul class="blogroll">        <li><a href="http:adactio.com/" rel="friend met colleague co-worker">Jeremy Keith</a></li>    </ul>

3.3 層疊和特殊性

CSS層疊（cascade）的重要度次序如下：

a，標有!important的使用者樣式

b，標有!important的作者樣式

c，作者樣式

d，使用者樣式

e，瀏覽器／使用者代理程式應用的樣式

具有更加特殊性選取器的規則優先於具有一般選取器的規則，如果兩個規則的特殊性相同，那麼後定義的規則優先。（可以通過將任何規則指定為!important來提高它的重要度，讓它優先於任何規則，甚至優先於作者加上的!important標誌的規則。）

3.3.1 特殊性

 

 

為樣式找到應用目標-CSS選取器