你學(xué)會了基本的id，class類選擇器和descendant后代選擇器，然后就覺得完事了嗎？如果這樣，你就會錯過許多靈活運用css的機會。雖然本文提到的許多選擇器都屬于CSS3，并且只能在現(xiàn)代的瀏覽器中使用，但學(xué)會這些是大有好處的。

什么是CSS選擇器呢？

 

每一條css樣式定義由兩部分組成，形式如下：[code]選擇器{樣式}[/code] 在{}之前的部分就是“選擇器”。 “選擇器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用于網(wǎng)頁中的哪些元素

1、*

* {
 margin: 0;
 padding: 0;
}

首先我們來認識一些簡單的選擇器，尤其針對初學(xué)者，然后再看其他高級的選擇器。

星號可以用來定義頁面的所有元素。許多開發(fā)者會使用這個技巧來把margin和padding都設(shè)為0。在快速開發(fā)測試中這種設(shè)置固然是好的，但我建議絕對不要在最終的產(chǎn)品代碼中使用。因為會給瀏覽器增加大量不必要的負荷。

星形*也可以用于子元素選擇器（child selectors）。

#container * {
 border: 1px solid black;
}

這段代碼會定義#container div所有子元素的樣式。跟上面一樣，如果可以盡量避免使用這個方法。

2. #X

#container {
 width: 960px;
 margin: auto;
}

使用＃號作為前綴可以選擇該id的元素。這是最常見的用法，但使用id選擇器時要謹慎。

問問自己：是否真的需要使用id來定義元素的樣式？

id選擇器比較局限，不能重用。如果可以的話，先嘗試使用標簽名稱，html5的其中一個新元素，或使用偽類。

3. .X

.error {
color: red;
}

這是class類選擇器。id和class類選擇器的區(qū)別是，類選擇器可以定義多個元素。當你想定義一組元素的樣式時可以使用class選擇器。另外，可以使用id選擇器來定義某一個特定的元素。

4. X

li a {
text-decoration: none;
}

下一個最常見的選擇器是descendant后代選擇器。當你需要更精確的定位時，可以使用后代選擇器。例如，假如說你只想選擇無序列表里的鏈接，而不是所有的鏈接？這種情況下你就應(yīng)該使用后代選擇器。

經(jīng)驗分享 - 如果你的選擇器看起來像X Y Z A B.error這樣就錯了。問問自己是否真的需要加入這么多負荷。

5. X

a { color: red; }
ul { margin-left: 0; }

假如你想定義頁面里所有type標簽類型一樣的元素，而不使用id或者class呢？可以簡單地使用元素選擇器。比如選擇所有的無序列表，可以用ul {}。

6. X:visited and X:link

a:link { color: red; }
a:visted { color: purple; }

我們使用:link偽類來定義所有還沒點擊的鏈接。

另外還有:visited偽類可以讓我們給曾經(jīng)點擊過或者訪問過的鏈接添加樣式。

7、 X + Y

ul + p {
 color: red;
}

這是鄰近元素選擇器，只會選中緊接在另一個元素后的元素。這上面的示例中，只有每個ul后面的第一個段落是紅色的。

8. X > Y

div#container > ul {
border: 1px solid black;
}

X Y和X > Y的區(qū)別是后者只會選中直接后代。例如，看看下面的代碼：

<div id="container">
   <ul>
      <li> List Item
        <ul>
           <li> Child </li>
        </ul>
      </li>
      <li> List Item </li>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>

 

#container > ul只會定義id為container的div里的ul元素，而不會定義第一個li里的ul。

因此，使用這種選擇器的效果更佳。實際上，在JAVAScript中尤其適用。

9.X ~ Y

ul ~ p {
 color: red;
}

這種兄弟選擇器跟X + Y很像，但沒有那么嚴格。鄰近選擇器（ul + p）只會選擇緊接在前一個元素后的元素，但兄弟選擇器更廣泛。比如，在上面的例子中，只要在ul后的p兄弟元素都會被選中。

10. X[href="foo"]

a[title] {
 color: green;
}

這種是屬性選擇器，在上面的例子中，帶有title屬性的鏈接標簽才會被匹配。沒有title屬性的標簽不會受到影響。但如果想更具體地根據(jù)屬性的值來選擇，就繼續(xù)往下看吧。

11. X[href="foo"]

a[href="http://www.icodingedu.com"] {
color: #1f6053; /* nettuts green */
}

上面的代碼定義了所以指向http://www.icodingedu.com的鏈接都是nettuts品牌的綠色。其他的鏈接不受影響。

注意我們把賦值放在引號里面，在JavaScript中選擇元素的時候也要記住這么使用。盡可能地使用CSS3標準的選擇器。

這種方法不錯，但還是有點局限。萬一鏈接也是指向Nettuts+，但路徑是icodingedu.com而不是完整的路徑呢？這種情況下我們可以使用正則表達式（regular expression）。

12. X[href*="nettuts"]

a[href*="tuts"] {
color: #1f6053; /* nettuts green */
}

解決了上面的問題。星號表示賦值出現(xiàn)在屬性的任意處。這樣就定義了指向nettuts.com，net.tutsplus.com甚至tutsplus.com的鏈接。

要記住的是這種表達比較寬泛。假如鏈接包含tuts但指向了不是Envato旗下的網(wǎng)站呢？如果你想更精確，可以使用^和$來匹配前綴和后綴。

13. X[href^="http"]

a[href^="http"] {
 background: url(path/to/external/icon.png) no-repeat;
 padding-left: 10px;
}

你有想過有些網(wǎng)站是怎么在鏈接旁邊加一個小圖標指示這是外部鏈接嗎？我相信你一定有見過這樣的小圖標，它們標示著鏈接會導(dǎo)向到另外的網(wǎng)站。

這非常容易做到。通常使用正則表達式來指定字符串的前綴。如果我們想定義所有href屬性前綴為http的鏈接標簽，我們可以使用上面代碼的選擇器。

可以看到我們沒有使用http://，因為沒有必要，而且這樣不能匹配以https://開頭的url。

接下來，比如說我們要定義所以指向圖片的鏈接又要怎么辦呢？這樣可以匹配字符串的后綴。

14. X[href$=".jpg"]

a[href$=".jpg"] {
 color: red;
}

再來，我們使用正則表達式符號$來表示字符串的后綴。在上面的例子中，我們將匹配所以指向圖片或至少以.jpg結(jié)尾的url。要記住的是當然這些樣式對gif和png是無效的。

15. X[data-*="foo"]

a[data-filetype="image"] {
 color: red;
}

就像上面所說的，我們怎么匹配所有的圖片，包括png，jpeg，jpg和gif？可以使用多個選擇器。

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
 color: red;
}

但這樣很麻煩，也很沒有效率。另一種解決方法是使用自定義屬性。比如在圖片鏈接標簽中添加data-filetype屬性。

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

這樣，我們就可以使用屬性選擇器來定義鏈接的樣式。

a[data-filetype="image"] {
 color: red;
}

16. X[foo~="bar"]

a[data-info~="external"] {
 color: red;
}
 
a[data-info~="image"] {
 border: 1px solid black;
}

這個技巧將會讓小伙伴們對你刮目相看。并沒有很多人知道這個技巧。波浪符號（~）可以讓你定義取值帶有空格的屬性。

繼續(xù)使用前面的自定義屬性，創(chuàng)建data-info屬性來匹配帶有空格的取值。舉個例子，這里我們匹配外部鏈接和圖片鏈接。

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

使用上面的代碼，現(xiàn)在我們可以用波浪號的技巧來定義包含其中一個值的元素。

/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
 color: red;
}
 
/* And which contain the value "image" */
a[data-info~="image"] {
border: 1px solid black;
}

巧妙吧？

17. X:checked

input[type=radio]:checked {
 border: 1px solid black;
}

很簡單，這個偽類可以用來定義選中（checked）的元素，比如單選按鈕（radio）或多選按鈕（checkbox）。

18. X:after

偽類before和after屬于高級用法。幾乎每一天都有人找到高效而有創(chuàng)意的新用法。這兩個偽類可以在元素前面和后面添加內(nèi)容。

許多人認識到這兩個偽類是因為這是清除浮動的技巧。

.clearfix:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  font-size: 0;
  height: 0;
  }
 
.clearfix { 
 *display: inline-block; 
 _height: 1%;
}

這個例子利用:after在元素后面添加間隔和清除浮動的元素。這是你值得擁有的高級技巧，尤其是當overflow: hidden;不管用的時候。

根據(jù)CSS3選擇器規(guī)范，語法上你應(yīng)該使用雙冒號來::來指定偽類。然而，為了兼容多數(shù)瀏覽器，單冒號也被承認。實際上，在目前的情況下，使用單冒號的選擇是明智的。

19. X:hover`

div:hover {
background: #e3e3e3;
}

好吧，這個你一定懂。正式的叫法是用戶交互偽類user action pseudo class。聽起來有些費解，但實際上并非如此。想給用戶鼠標劃過的元素添加樣式？這就派上用場了！

要記住的是在舊版的IE里，:hover只能用于鏈接標簽。

最常見的用法是，比如，當鼠標劃過鏈接，鏈接會出現(xiàn)下劃線（border-bottom）。

a:hover {
 border-bottom: 1px solid black;
}

經(jīng)驗分享 - border-bottom: 1px solid black;比text-decoration: underline;的效果更好。

20. X:not(selector)

div:not(#container) {
 color: blue;
}

否定偽類特別有用。假設(shè)我想選擇所有 divs，除了 id 為 的那個 container。上面的代碼片段將完美地處理該任務(wù)。

或者，如果我想選擇除段落標簽之外的每個元素（不建議），我們可以這樣做：

*:not(p) {
color: green;
}

21. X::pseudoElement

p::first-line {
 font-weight: bold;
 font-size: 1.2em;
}

我們可以使用偽元素（用::表示）來定義某些片段元素，比如第一行或第一個字母。要記住的是這只能用于塊狀（block）元素。

偽元素使用兩個冒號::。

下面匹配段落的第一個字母：

p::first-letter {
 float: left;
 font-size: 2em;
 font-weight: bold;
 font-family: cursive;
 padding-right: 2px;
}

上面的代碼會先找到所有的段落，然后匹配元素的第一個字母。

這常用于創(chuàng)建類似報紙文章的樣式。

匹配段落的第一行

p::first-line {
 font-weight: bold;
 font-size: 1.2em;
}

類似地，這里使用::first-line來定義元素的第一行的樣式。

“為了兼容現(xiàn)有的樣式標準，用戶代理必須同時采納CSS1和CSS2里使用單冒號來表示偽元素的標準（比如:first-line，:first-letter，:before和:after）。但新的偽元素不兼容這種特列。 － 資料來源”

22. X:nth-child(n)

li:nth-child(3) {
 color: red;
}

還記得以前我們不可以匹配一組序列元素里的某個元素嗎？nth-child偽元素就能解決這個問題！

要注意的是nth-child指序列里的第n個元素，從1數(shù)起。如果你想匹配列表里的第二個元素，可以使用li:nth-child(2)。

我們甚至可以使用這種方法來選擇一系列的子元素。比如li:nth-child(4n)可以選擇排在4的倍數(shù)的元素。

23. X:nth-last-child(n)

li:nth-last-child(2) {
 color: red;
}

假如你有一個無序列表里面有很多子元素，但你只想匹配第三到最后一個元素，那該怎么辦？你可以使用偽類nth-last-child。

這個技巧跟上面的一樣，但是從集合的最后一個數(shù)起。

24. X:nth-of-type(n)

ul:nth-of-type(3) {
 border: 1px solid black;
}

有時候你可能想通過元素的類型type來選擇，而不是子元素child。

假設(shè)有5個無序列表。如果你想定義第三個ul的樣式，但又沒有id來進行匹配，那么可以使用偽類nth-of-type(n)。在上面的代碼中，只有第三個ul會有邊框。

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) {
 border: 1px solid black;
}

當然，我們也可以使用nth-last-of-type來選擇倒數(shù)第n個元素。

26. X:first-child

ul li:first-child {
 border-top: none;
}

這種偽類可以用于選中母元素的第一個子元素，常常用于去掉第一個或最后一個元素的邊框。

例如，假設(shè)你有一個序列，每一行的元素都有上邊框border-top和下邊框border-bottom。這樣的話第一個和最后一個元素看來起就沒有那么整齊。

許多設(shè)計師就會通過給第一個和最后一個元素添加樣式來解決，但實際上可以使用這里提到的偽類。

27. X:last-child`

ul > li:last-child {
 color: green;
}

last-child是first-child的反面，可以匹配最后一個子元素。

示例

下面的例子展示了怎么使用這些偽類。先創(chuàng)建一個無序列表。

代碼

<ul>
   <li> List Item </li>
   <li> List Item </li>
   <li> List Item </li>
</ul>

這是一個簡單的列表。

CSS

ul {
 width: 200px;
 background: #292929;
 color: white;
 list-style: none;
 padding-left: 0;
}
 
li {
 padding: 10px;
 border-bottom: 1px solid black;
 border-top: 1px solid #3c3c3c;
}

這部分代碼設(shè)置背景顏色，去掉瀏覽器給ul設(shè)置的padding，然后給li加上邊框增加深度。

 

給列表增加深度，可以給每個li添加比背景顏色深一點的下邊框border-bottom。然后添加比背景顏色淺一點的上邊框border-top。

 

唯一的問題是，上圖中無序列表的頂部和底部也會有邊框，看起來有點奇怪。可以用偽類:first-child和:last-child來解決。

li:first-child {
  border-top: none;
}
 
li:last-child {
 border-bottom: none;
}

這樣就好了。

28. X:only-child

div p:only-child {
 color: red;
}

事實上你很少會用到only-child這個偽類，但是當你需要的時候是可以使用的。

only-child可以讓你匹配唯一的子元素。例如，在上面的代碼中，只有當div只有一個p子元素的時候段落字體才是紅色的。

再看下面的代碼。

<div><p> My paragraph here. </p></div>
 
<div>
 <p> Two paragraphs total. </p>
 <p> Two paragraphs total. </p>
</div>

在這種情況下，第二個div里面的段落不會被選中，只有第一個div的段落才被選中。只要母元素含有超過一個子元素，only-child偽類就會失效。

29. X:only-of-type

li:only-of-type {
 font-weight: bold;
}

這個偽類有幾種不同的用法。only-of-type會匹配母元素里沒有鄰近兄弟元素的子元素。例如，匹配所有只有一個列表元素的ul。

首先想想要怎么做？你可以使用ul li，但這樣會匹配所有無序列表的元素，這樣only-of-type就是唯一的解決方法。

ul > li:only-of-type {
 font-weight: bold;
}

30. X:first-of-type

first-of-type可以用來選擇該類型的第一個元素。

練習(xí)

為了更好地理解，我們來做一個練習(xí)。拷貝下面的代碼粘貼到你的代碼編輯器里：

<div>
 <p> My paragraph here. </p>
 <ul>
    <li> List Item 1 </li>
    <li> List Item 2 </li>
 </ul>
 
 <ul>
    <li> List Item 3 </li>
    <li> List Item 4 </li>
 </ul>   
</div>

現(xiàn)在，無需進一步閱讀，嘗試找出如何僅定位 "List Item 2"。當您弄清楚（或放棄）后，請繼續(xù)閱讀。

解決方案 1

有多種方法可以解決此測試。我們將審查其中的一些。讓我們從使用 first-of-type.

ul:first-of-type > li:nth-child(2) {
 font-weight: bold;
}

這個片段本質(zhì)上說，要找到頁面上的第一個無序列表，然后只找到直接子項，它們是列表項。接下來，將其過濾到該集合中的第二個列表項。

解決方案 2

另一種選擇是使用相鄰選擇器。

p + ul li:last-child {
 font-weight: bold;
}

在這種情況下，我們找到 ul 立即執(zhí)行 p 標記的 ，然后找到元素的最后一個子元素。

解決方案 3

使用這些選擇器，我們可以隨心所欲地變得討厭或好玩。

ul:first-of-type li:nth-last-child(1) {
 font-weight: bold;   
}

這一次，我們抓取 ul 頁面上的第一個，然后找到第一個列表項，但從底部開始！

結(jié)論

如果你想兼容舊的瀏覽器，比如IE6，在使用這些新的選擇器時需要更加注意。但是不要讓舊瀏覽器妨礙你做新的嘗試。可以參考瀏覽器兼容性列表。另外可以使用Dean Edward的E9.js。

 

另外，當使用JavaScript類庫的時候，比如jQuery，盡可能地使用原生的CSS3選擇器。這樣可以加快代碼的運行速度，因為選擇器引擎使用瀏覽器內(nèi)置的解析器，速度更快。

感謝閱讀，希望你能有所收獲！如果學(xué)習(xí)有問題，可以私聊我們！