今天是CSS小孩系列！（小孩系列是我自己取的…）
我在寫網頁時常常遇到的問題是，當我想在一區塊裡某些部份作不同設定的時候，往往要再增加一個選擇器，而且只有這個區塊會用到，非常不方便。發現小孩系列，內心如找到好素材一樣興奮。以下紀錄異同處。
:first-child / :last-child
顧名思義就是第一個 / 最後一個孩子，用在“同群組”中裡面第一以及最後一個“同類元素”，
想成是“家庭（群組）”跟“兄弟姊妹（同類元素）”就很容易。
也就是說：即使有不同群組，該群組內的第一、倒數第一都會被套用樣式。
但要注意的是如果該元素不是實質上的第一位、最後一位的話就沒用了ˊ_ˋ
:nth-child(數字) / :nth-last-child(數字)
所以這兩種屬性也意味著要實質排在剛好的順序才會套用。
|
1 2 3 |
; html-script: false ] a:first-child { background: pink; } a:last-child { background: green; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
; html-script: false ] <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
跟上例很像，但唯一不同的是即使有人插隊也不影響～
|
1 2 3 |
; html-script: false ] b:first-of-type { color: orange; } b:last-of-type { color: red; } |
|
1 2 3 4 5 6 7 |
; html-script: false ] <div> <a>我是第一個</a> <b>我才是真正的第一個</b> <span>中間來串場</span> <b>我是最後一個</b> </div> |
那如果是這樣的情況，那算第幾個呢～xD
|
1 2 3 4 5 6 7 8 9 |
; html-script: false ] <div> <p>我是句子</p> <p>我是句子</p> <p>我是句子</p> <b>猜猜我是第幾個</b> <p>我是句子</p> <p>我是句子</p> </div> |
答案是寫在後面的CSS！因為後來的CSS會蓋掉先前的，就看把哪個屬性寫在順序後囉！
點我看範例
:nth-of-type() / :nth-last-of-type()
同理可證，不受插隊影響～
|
1 2 |
; html-script: false ] span:nth-of-type(2) { background: gray; } |
|
1 2 3 4 5 6 7 |
; html-script: false ] <div> <p>我是句子</p> <span>雖然我排第二個，但我不是真的第二個</span> <p>我是句子</p> <p>我是句子</p> </div> |
: only-child
同群組內只有一個孩子的時候才會套用。
: only-of-type
不因參雜別的元素而影響。
|
1 2 3 |
; html-script: false ] p:only-child { background: #000; color: #fff; } a:only-of-type { color: gray; } |
|
1 2 3 4 5 6 7 8 |
; html-script: false ]<div> <p>我是句子</p> </div> <div> <p>我是句子</p> <a>hi</a> </div> |
以上是今天的孩子系列，若有誤還請指正，謝謝！
本文同步發表於http://ithelp.ithome.com.tw/question/10138411