CSS是Cascading Style Sheet的簡(jiǎn)稱(chēng)，用來(lái)負(fù)責(zé)對(duì)頁(yè)面的內(nèi)容進(jìn)行樣式渲染。是前端開(kāi)發(fā)領(lǐng)域中第二重要的DSL，本文對(duì)CSS的以下知識(shí)要點(diǎn)進(jìn)行總結(jié)：

1. 規(guī)則集
2. CSS中的單位
3. CSS中的顏色

一. 規(guī)則集

CSS是以規(guī)則集的形式被書(shū)寫(xiě)出來(lái)的。每個(gè)規(guī)則由兩部分組成，一個(gè)是選擇器（selector），一個(gè)是聲明塊（delcaration block）。一個(gè)常見(jiàn)的CSS規(guī)則如下所示：

div {
    text-align: right;
}

這里的選擇器為div，意味著匹配所有的div標(biāo)簽。聲明塊為{ text-align: right; }。聲明塊可以有多條語(yǔ)句構(gòu)成，每行一個(gè)，以分號(hào)隔開(kāi)。CSS中有復(fù)雜的選擇器機(jī)制，下面我們來(lái)一一介紹。

1.1 ID選擇器

ID選擇器以#號(hào)開(kāi)頭，匹配的是HTML元素中對(duì)應(yīng)ID的元素，例如我們有這樣的ID選擇器：

#happy-cake {

}

那么：

<!-- WILL match -->
<div id="happy-cake"></div>

<!-- WILL match -->
<aside id="happy-cake"></aside>

<!-- Will NOT match -->
<div id="sad-cake">Wrong ID!</div>

<!-- Will NOT match -->
<div class="happy-cake">That's not an ID!</div>

1.2 類(lèi)選擇器

類(lèi)選擇器則以句點(diǎn).開(kāi)頭，匹配的是HTML元素中對(duì)應(yīng)class的元素，它可以匹配多個(gè)相同class的HTML元素，比如以下的類(lèi)選擇器：

.module {

}

那么：

<!-- WILL match -->
<div class="module"></div>

<!-- WILL match -->
<aside class="country module iceland"></aside>

<!-- Will NOT match -->
<div class=".module">The dot is for CSS, not HTML</div>

<!-- Will NOT match -->
<div class="bigmodule">Wrong class</div>

1.3 標(biāo)簽選擇器

標(biāo)簽選擇器用于匹配HTML的元素。比如我們要選擇所有的h2標(biāo)簽：

h2 {

}

那么：

<!-- WILL match -->
<h2>Hi, Mom</h2>

<main>
  <div>
     <!-- WILL match -->
     <h2>Anywhere</h2>
  </div>
</main>

<!-- Will NOT match -->
<div class="h2">Wrong tag, can't trick it</div>

<!-- Will NOT match -->
<h2class="yolo">Make sure that tag has a space after it!</h2>

1.4 屬性選擇器

屬性選擇器的基本用法是選擇具有某個(gè)屬性的元素。舉例，如果我要匹配rel屬性為external的h1元素，那么可以寫(xiě)：

h1[rel="external"] {

}

屬性選擇器還有很多高級(jí)用法。上面用到的=屬于精確匹配，其他常用的還有：

1. *=模糊匹配：h1[rel*="external"] { color: red; }選擇<h1 rel="xxxexternalxxx">Attribute Contains</h1>
2. ^=開(kāi)頭匹配：h1[rel^="external"] { color: red; }選擇<h1 rel="external-link yep">Attribute Begins</h1>
3. ="external"] { color: red; }選擇<h1 rel="friend external">Attribute Ends</h1>`
4. ~=匹配空格分隔的多個(gè)屬性：h1[rel~="external"] { color: red; }選擇<h1 rel="friend external sandwich">Attribute Space Separated</h1>
5. |=匹配破折號(hào)-分隔的多個(gè)屬性的第一個(gè)：h1[rel|="friend"] { color: red; }選擇<h1 rel="friend-external-sandwich">Attribute Dash Separated</h1>
6. 多重屬性選擇：h1[rel="handsome"][title^="Important"] { color: red; }選擇<h1 rel="handsome" title="Important note">Multiple Attributes</h1>

1.5 偽類(lèi)選擇器

偽類(lèi)選擇器用于指定元素的狀態(tài)，以冒號(hào):開(kāi)頭，比如:hover表示當(dāng)鼠標(biāo)懸停時(shí)在元素上應(yīng)用樣式。又比如:nth-child這樣的位置選擇器可以用復(fù)雜的語(yǔ)法進(jìn)行子節(jié)點(diǎn)選擇，一些常用的例子可以實(shí)現(xiàn)復(fù)雜的選擇。

1.6 關(guān)系選擇器

CSS中還有一類(lèi)選擇器叫做關(guān)系選擇器，它用來(lái)根據(jù)元素與元素之間的關(guān)系來(lái)選擇元素并渲染樣式。常見(jiàn)的有：

1. E: first-child表示任一是其父母節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)的元素E
2. B + E表示元素B的任一下一個(gè)兄弟元素E
3. B ~ E表示B元素后面的擁有共同父元素的兄弟元素E
4. A > E表示元素A的任一子元素E(也就是直系后代)
5. A E表示元素A的任一后代元素E (后代節(jié)點(diǎn)指A的子節(jié)點(diǎn)，子節(jié)點(diǎn)的子節(jié)點(diǎn)，以此類(lèi)推)

1.7 任意組合

熟悉了上面的幾種要點(diǎn)，在實(shí)際開(kāi)發(fā)中我們就可以任意組合來(lái)編寫(xiě)各種復(fù)雜的規(guī)則集，舉例：

.module.news {  
  /* Selects elements with BOTH of those classes */
}
#site-footer::after {
  /* Adds content after an element with that ID */
}
section[data-open] {
  /* Selects only section elements if they have this attribute */
}
.module > h2 {
  /* Select h2 elements that are direct children of an element with that class */
} 
h2 + p {
  /* Select p elements that are directly following an h2 element */
}
li ~ li {
  /* Select li elements that are siblings (and following) another li element. */
}

以上就是規(guī)則集的工作原理，選擇器的詳細(xì)說(shuō)明，可以參考官方文檔。

1.8 CSS特異值

CSS選擇器有基于特異值的優(yōu)先級(jí)規(guī)則，一般來(lái)說(shuō)，特異值相同的選擇器，處在下方的會(huì)覆蓋上方的規(guī)則。對(duì)于特異值不同的選擇器，高特異值的選擇器會(huì)優(yōu)先于低特異值的選擇器被使用。特異值的計(jì)算方法如下圖所示：

css_specificity.png

元素的樣式屬性特異值最高，然后是ID，再然后是類(lèi)和偽類(lèi)以及屬性選擇器，最后是標(biāo)簽選擇器，具體的計(jì)算方法可以參考這篇文章。

二. CSS中的長(zhǎng)度單位

CSS中表示長(zhǎng)度的單位分為兩種。一種是相對(duì)長(zhǎng)度，比如用于相對(duì)字體大小的有em，ex，ch，rem，lh和rlh。用于視口比例長(zhǎng)度（視口是指文檔可視部分）的有vh，vw，vi，vb，vmin和vmax，相對(duì)長(zhǎng)度常用于響應(yīng)式設(shè)計(jì)。絕對(duì)長(zhǎng)度單位有px，mm，cm，in，pt和pc。

三. CSS中的顏色

CSS中表示顏色有三種方式：RGB，HEX和字符串。RGB是用0-255的數(shù)值來(lái)分別表示Red，Green和Blue三種顏色配比，例如rgb(255, 0, 255)。HEX則用#號(hào)開(kāi)頭的16進(jìn)制數(shù)來(lái)表示，比如上面的顏色也可以表示成#FF00FF，HEX表示法可以簡(jiǎn)寫(xiě)。最后一種是字符串，比如blue，但這種方式無(wú)法表達(dá)一些不常見(jiàn)的顏色。在線顏色選擇器對(duì)確認(rèn)顏色很有幫助。

以上就是對(duì)CSS基本用法的一個(gè)總結(jié)，詳細(xì)的CSS屬性可以參考官方索引。