你必須記住的30個CSS選擇器？

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

 

什麼是CSS選擇器呢？

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

1、*

* {
margin: 0;
padding: 0;
}

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

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

星形*也可以用於子元素選擇器（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類選擇器的區別是，類選擇器可以定義多個元素。當你想定義一組元素的樣式時可以使用class選擇器。另外，可以使用id選擇器來定義某一個特定的元素。

4. X

li a {
text-decoration: none;
}

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

經驗分享 - 如果你的選擇器看起來像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僞類可以讓我們給曾經點擊過或者訪問過的鏈接添加樣式。

7、 X + Y

ul + p {
color: red;
}

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

8. X > Y

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

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

<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屬性的標籤不會受到影響。但如果想更具體地根據屬性的值來選擇，就繼續往下看吧。

 

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 */
}

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

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

13. X[href^="http"]

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

你有想過有些網站是怎麼在鏈接旁邊加一個小圖標指示這是外部鏈接嗎？我相信你一定有見過這樣的小圖標，它們標示着鏈接會導向到另外的網站。

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

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

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

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

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

再來，我們使用正則表達式符號$來表示字符串的後綴。在上面的例子中，我們將匹配所以指向圖片或至少以.jpg結尾的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;
}

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

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

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

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

/* 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屬於高級用法。幾乎每一天都有人找到高效而有創意的新用法。這兩個僞類可以在元素前面和後面添加內容。

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

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

.clearfix {
*display: inline-block;
_height: 1%;
}

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

根據CSS3選擇器規範，語法上你應該使用雙冒號來::來指定僞類。然而，爲了兼容多數瀏覽器，單冒號也被承認。實際上，在目前的情況下，使用單冒號的選擇是明智的。

19. X:hover`

div:hover {
background: #e3e3e3;
}

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

要記住的是在舊版的IE裏，:hover只能用於鏈接標籤。

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

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

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

 

26. X:first-child

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

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

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

許多設計師就會通過給第一個和最後一個元素添加樣式來解決，但實際上可以使用這裏提到的僞類。

27. X:last-child`

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

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

示例

下面的例子展示了怎麼使用這些僞類。先創建一個無序列表。

代碼

<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;
}

這部分代碼設置背景顏色，去掉瀏覽器給ul設置的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可以用來選擇該類型的第一個元素。

練習

爲了更好地理解，我們來做一個練習。拷貝下面的代碼粘貼到你的代碼編輯器裏：

<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>

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

解決方案 1

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

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

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

解決方案 2

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

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

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

解決方案 3

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

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

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

結論

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

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

感謝閱讀，希望你能有所收穫！

 

爲幫助到一部分同學不走彎路，真正達到一線互聯網大廠前端項目研發要求，首次實力寵粉，打造了《30天挑戰學習計劃》，內容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真實企業項目開發，雲服務器部署上線，從入門到精通

• PC端項目開發（1個）
• 移動WebApp開發（2個）
• 多端響應式開發（1個）

共4大完整的項目開發 ！一行一行代碼帶領實踐開發，實際企業開發怎麼做我們就是怎麼做。從學習一開始就進入工作狀態，省得浪費時間。

從學習一開始就同步使用 Git 進行項目代碼的版本的管理，Markdown 記錄學習筆記，包括真實大廠項目的開發標準和設計規範，命名規範，項目代碼規範，SEO優化規範

從藍湖UI設計稿 到 PC端，移動端，多端響應式開發項目開發

• 真機調試，雲服務部署上線；
• Linux環境下 的 Nginx 部署，Nginx 性能優化；
• Gzip 壓縮，HTTPS 加密協議，域名服務器備案，解析；
• 企業項目域名跳轉的終極解決方案，多網站、多系統部署；
• 使用 使用 Git 在線項目部署；

這些內容在《30天挑戰學習計劃》中每一個細節都有講到，包含視頻+圖文教程+項目資料素材等。只爲實力寵粉，真正一次掌握企業項目開發必備技能，不走彎路 ！

過程中【不涉及】任何費用和利益，非誠勿擾 。

如果你沒有添加助理老師微信，可以添加下方微信，說明要參加30天挑戰學習計劃，來自頭條號！老師會邀請你進入學習，並給你發放相關資料

30 天挑戰學習計劃 Web 前端從入門到實戰 | arry老師的博客-艾編程