今天是CSS小孩系列！（小孩系列是我自己取的...）
我在寫網頁時常常遇到的問題是，當我想在一區塊裡某些部份作不同設定的時候，往往要再增加一個選擇器，而且只有這個區塊會用到，非常不方便。發現小孩系列，內心如找到好素材一樣興奮。以下紀錄異同處。
今天是CSS小孩系列！（小孩系列是我自己取的...）
我在寫網頁時常常遇到的問題是，當我想在一區塊裡某些部份作不同設定的時候，往往要再增加一個選擇器，而且只有這個區塊會用到，非常不方便。發現小孩系列，內心如找到好素材一樣興奮。以下紀錄異同處。

:first-child / :last-child
顧名思義就是第一個 / 最後一個孩子，用在“同群組”中裡面第一以及最後一個“同類元素”，
想成是“家庭（群組）”跟“兄弟姊妹（同類元素）”就很容易。
也就是說：即使有不同群組，該群組內的第一、倒數第一都會被套用樣式。
但要注意的是如果該元素不是實質上的第一位、最後一位的話就沒用了ˊ_ˋ
:nth-child(數字) / :nth-last-child(數字)
所以這兩種屬性也意味著要實質排在剛好的順序才會套用。

a:first-child { background: pink; }
a:last-child { background: green; }



<div>
    <a>我是第一個</a>
    <span>中間插隊沒影響</span>
    <a>我是最後一個</a>
</div>
<div>
    <span>插隊一號</span>
    <a>我是第一個，但沒有變色</a>
    <a>我沒有變色</a>
    <a>我沒有變色</a>
    <a>我是最後一個，但沒有變色</a>
    <span>插隊最後一號</span>
</div>

:first-of-type / :last-of-type
跟上例很像，但唯一不同的是即使有人插隊也不影響～

b:first-of-type { color: orange; }
b:last-of-type { color: red; }



<div>
<a>我是第一個</a>
<b>我才是真正的第一個</b>
<span>中間來串場</span>
<b>我是最後一個</b>
</div>

那如果是這樣的情況，那算第幾個呢～xD

<div>
    <p>我是句子</p>
    <p>我是句子</p>
    <p>我是句子</p>
    <b>猜猜我是第幾個</b>
    <p>我是句子</p>
    <p>我是句子</p>
</div>

答案是寫在後面的CSS！因為後來的CSS會蓋掉先前的，就看把哪個屬性寫在順序後囉！

:nth-of-type() / :nth-last-of-type()
同理可證，不受插隊影響～

span:nth-of-type(2) { background: gray; }




<div>
<p>我是句子</p>
<span>雖然我排第二個，但我不是真的第二個</span>
<p>我是句子</p>
<p>我是句子</p>
</div>

:only-child
同群組內只有一個孩子的時候才會套用。
:only-of-type
不因參雜別的元素而影響。

p:only-child { background: #000; color: #fff; }
a:only-of-type { color: gray; }



<div>
    <p>我是句子</p>
</div>
<div>
    <p>我是句子</p>
    <a>hi</a>
</div>

以上是今天的孩子系列，若有誤還請指正，謝謝！
本文同步發表於http://azzurro.blog.aznc.cc/make_a_website_16/，若要直接觀看範例請連至Blog，謝謝