css 選擇器是用來指定該組 CSS 樣式會對什么元素生效的，是連接 html 結構和 CSS 樣式的橋梁。這一篇將給大家介紹一下 CSS 里基礎選擇器的用法，同時會對使用上給出一些建議。
基礎選擇器包括 ID 選擇器、類選擇器、標簽選擇器、通配符選擇器和屬性選擇器這幾種。
ID 選擇器
ID 選擇器是用 “#” 號加 ID 名稱 xxx 來表示，用來選擇 HTML 中 id="xxx" 的 DOM 元素。我們以選擇下面這個 ID 為 content 的元素為例：
<div id="content">我是id選擇器需要選中的元素</div>
當我們想把樣式應用到這個元素的時候，就可以用下面的 ID 選擇器：
#content{
color: #fff;
background: #000;
}
這樣 ID 為 content 的元素就會有一個黑底白字的效果了。在 ID 選擇器中，有幾點要注意：
1、ID 選擇器只能對一個元素生效，同一個頁面里不允許出現兩個 ID 相同的元素。2、理論上 ID 選擇器是效率最高的選擇器。但是由于它只能選一個元素，特異性太高，在 實際開發中也很少在 CSS 里使用 ID 選擇器。3、也正是因為 ID 選擇器特異性高，所以在 JS 里使用 ID 選擇器的比較常見。
類選擇器
類選擇器是用 “.” 加上 class 名稱來表示，用來選擇 HTML 中 class="xxx" 的 DOM 元素。我們以選擇下面 class 名稱為 list-item 的元素為例：
<ul> <li class="list-item"></li> <li class="list-item"></li> <li class="list-item"></li> <li class="list-item"></li> </ul>
當我們想把樣式應用到列表里每一條元素的時候，就可以用類選擇器：
.list-item{
border-bottom: 1px solid #ccc;
}
這樣列表里所有的項就都有一個寬 1px 灰色的下邊框了。
在類選擇器中，要注意以下幾點：
1、類選擇器的效率也是不錯的，和 ID 選擇器并不會有太大的差異。所以在寫 CSS 的時候，比較推薦用類選擇器。2、類選擇器會選擇到所有類名相同的 DOM 元素，沒有數量限制。3、類選擇器應該是樣式開發中應用最多的選擇器。
通配選擇器
通配選擇器使用星號來選擇到頁面里所有元素。用法如下：
*{
margin: 0;
padding: 0;
}
上面這個樣式就是把所有元素的內外邊距都歸零。由于通配選擇器要把樣式覆蓋到所有的元素上，可想而知它的效率并不會高，所以在實際開發中一般不建議使用通配選擇器。
標簽選擇器
標簽選擇器的作用是選中 HTML 中某一種類的標簽，它直接使用 HTML 中的標簽名作為選擇器的名稱。比如我們需要把頁面里所有大標題的字號都調成 20px，就可以用標簽選擇器來實現：
h1{
font-size: 20px;
}
Tips：標簽選擇器通常用來重置某些標簽的樣式，標簽選擇器的效率也不是很高，但要好過通配選擇器。
屬性選擇器
屬性選擇器比較好理解，就是通過 DOM 的屬性來選擇該 DOM 節點。屬性選擇器是用中括號 “[]” 包裹，比如選擇所有帶有 href 屬性的標簽，就可以使用這樣的選擇器:
a[href]{
color: red;
}
這條選擇器就可以讓所有帶 href 屬性的 a 標簽字體都變成紅色。屬性選擇器有如下幾種形式：
[attr]，用來選擇帶有 attr 屬性的元素，如剛提到的 a [href]。
<!-- HTML：-->
<a href="/">返回主頁</a>
// 下面的CSS會使所有帶href的a標簽字體變紅色：
a[href]{
color: red;
}
[attr=xxx]，用來選擇有 attr 屬性且屬性值等于 xxx 的元素，如選擇所有文本類型的輸入框，可以用 input [type=text]。
<!-- HTML：-->
<input type="text" value="大花碗里扣個大花活蛤蟆"/>
// CSS：
input[type=text]{
color: red;
}
這個選擇器里面要注意，xxx 和 HTML 中的屬性值必須完全相等才會生效。
<!-- HTML：-->
<input class="input text" type="text" value="大花碗里扣個大花活蛤蟆"/>
// CSS：
input[class=input]{
color: red;
}
上面例子中 input [class=input] 的選擇器并不能選中 class=“input text” 的元素，如果非要用這種選擇器，必須使用 input [class=“input text”] 才可以。
[attr~=xxx]，這個選擇器中間用了～=，選擇屬性值中包含 xxx 的元素，但一定是逗號分隔的多個值中有一個能和 xxx 相等才行。
<!-- HTML：-->
<input class="input text" type="text" value="大花碗里扣個大花活蛤蟆"/>
// CSS：
input[class~=input]{
color: red;
}
在上面的例子中，使用 input [class~=input] 就可以選中 class=“input text” 的元素了。
[attr|=xxx]，這個選擇器是用來選擇屬性值為 xxx 或 xxx- 開頭的元素，比較常用的場景是選擇某一類的屬性。
<!-- HTML：-->
<div class="article">我是article</div>
<div class="article-title">我是article-title</div>
<div class="article-content">我是article-content</div>
<div class="article_footer">我是article_footer，不是以artical-開頭的</div>
// CSS：
div[class|=article]{
color: red;
}
上面的選擇器就可以對所有 article 開頭的元素生效，包括 class=“article” 的元素。上面的例子中，選擇器會對前三條都生效，但不會對第四條生效。
[attr^=xxx]，這個選擇器會匹配以 xxx 開頭的元素，實際上就是用正則去匹配屬性值，只要是以 xxx 開頭都可以。
<!-- HTML：-->
<div class="article">我是article</div>
<div class="article-title">我是article-title</div>
<div class="article-content">我是article-content</div>
<div class="article_footer">我是article_footer，不是以artical-開頭的</div>
// CSS：
div[class^=article]{
color: red;
}
還是用剛才的例子，如果把選擇器換成 div [class^=article]，那么上面四個 HTML 元素都會被選中了。
[attr$=xxx]，這個選擇器和上一個相似，它是用正則匹配的方式來選擇屬性值以 xxx 結尾的元素。
<!-- HTML：-->
<button class="btn btn-disabled">禁用的按鈕</button>
<select class="select select-disabled city-select"></select>
<input class="input input-disabled" value="禁用的輸入框"/>
// CSS：
[class$=disabled]{
display: none;
}
上面的例子中，我們想把頁面里有禁用標識的所有元素都隱藏掉，就可以使用 [class$=disabled] 來選擇所有 class 里以 disabled 結尾的元素。這么用的前提是提前約定好，disabled 相關的類要放在最后，否則就像上面的 select 一樣不會生效。
[attr*=xxx]，最后一個，這個是用正則匹配的方式來選擇屬性值中包含 xxx 字符的所有元素。這個選擇器的規則算是最寬泛的，只要 xxx 是元素屬性值的子字符串，這個選擇器就會生效。
<!-- HTML：-->
<button class="btn btn-disabled">禁用的按鈕</button>
<select class="select select-disabled city-select"></select>
<input class="input input-disabled" value="禁用的輸入框"/>
// CSS：
[class*=disabled]{
display: none;
}
還是用剛才 disable 的例子，如果我們用 [class*=disabled] 選擇器來選擇 disabled 元素，就可以不考慮 -disable 屬性所在的位置了，它對所有帶這個單詞的屬性都會生效，哪怕是 class=“i-am-a-disabled-element” 的元素都可以。
Tips：1. 屬性選擇器要做文本的匹配，所以效率也不會高。2. 在使用屬性選擇器時，盡量要給它設置上生效的范圍，如果只用了個 [href] 相當于要在所有元素里找帶 href 的元素，效率會很低。如果用 a [href] 會好的多，如果用 .link [href] 就更好了。這種組合方式我們在下一節講解。3. 屬性選擇器很靈活，如果能使用 CSS 代替 JS 解決一些需求，可以不用太糾結性能的問題，用 JS 實現也一樣要耗費資源的。
總結
這一篇我們講了 CSS 里幾種基礎的選擇器，包括 ID 選擇器、類選擇器、標簽選擇器、通配符選擇器和屬性選擇器。這幾個選擇器里面最常用的就是類選擇器，最靈活的是屬性選擇器，而 ID 選擇器、標簽選擇器和通配選擇器的應用場景都不多。
