css僞類 :first-child :nth-child() 詳解

一個 CSS  僞類（pseudo-class） 是一個以冒號(:)做爲前綴，被添加到一個選擇器末尾的關鍵字，當你但願樣式在特定狀態下才被呈現到指定的元素時，你能夠往元素的選擇器後面加上對應的僞類（pseudo-class）。你可能但願某個元素在處於某種狀態下呈現另外一種樣式，例如當鼠標懸停在元素上面時，或者當一個複選框被禁用或被勾選時，又或者當一個元素是它在 DOM 樹中父元素的第一個子元素時。

舉個例子，看下面這段代碼

<div class="wrapper">
        <ul class="item">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div class="item1">
            <h1>5</h1>
            <span>6</span>
            <span>7</span>
        </div>
    </div>

.item:first-child{
   background-color: red;
}

因此1️⃣.item : first-child的意思就是class爲item而且是第一個子元素的這個元素（處因而第一個子元素這個狀態下），設置背景顏色爲紅色。

根據上面的例子理解了僞類的意思，那麼基本上後面幾個:nth-child() :first-of-type :nth-of-type() 就差很少懂了

2️⃣:nth-child()

MDN解釋：首先找到全部當前元素的兄弟元素，而後按照位置前後順序從1開始排序，選擇的結果爲第（an+b）個元素的集合（n=0，1，2，3...）

<div class="wrapper">
    <ul class="item">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <div class="item">
        <h1>5</h1>
        <span>6</span>
        <span>7</span>
    </div>
</div>

.item li:nth-child(2){
    background-color: red;
}
h1:nth-child(2){
    background-color: blue;
}
h1:nth-child(1){
    background-color: green;
}

根據nth-child這個狀態的意思，就是兄弟元素裏面的順序排下來的第幾個

那麼.item li:nth-child(2) 意思就是class 爲item的元素的子元素，是li元素，而且這個li元素要是兄弟元素裏面的第二個。能夠得出<li>2</li>會變成紅色背景。

其餘幾個樣式結果爲，h1:nth-child(2)無效果，<h1>5</h1>爲綠色背景

總之，搞清楚僞類的機制，就很簡單了。