【前端入門必知必會】CSS 基礎選擇器

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 選擇器中，有幾點要注意：

一、ID 選擇器只能對一個元素生效，同一個頁面裏不容許出現兩個 ID 相同的元素。 二、理論上 ID 選擇器是效率最高的選擇器。可是因爲它只能選一個元素，特異性過高，在 實際開發中也不多在 CSS 裏使用 ID 選擇器。 三、也正是由於 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 灰色的下邊框了。

在類選擇器中，要注意如下幾點：

一、類選擇器的效率也是不錯的，和 ID 選擇器並不會有太大的差別。因此在寫 CSS 的時候，比較推薦用類選擇器。 二、類選擇器會選擇到全部類名相同的 DOM 元素，沒有數量限制。 三、類選擇器應該是樣式開發中應用最多的選擇器。

通配選擇器

通配選擇器使用星號來選擇到頁面裏全部元素。用法以下：

*{
    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 選擇器、標籤選擇器和通配選擇器的應用場景都很少。