Beauty CSS(5)-選擇器part3

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

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

點我看範例

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

點我看範例

那如果是這樣的情況,那算第幾個呢~xD

答案是寫在後面的CSS!因為後來的CSS會蓋掉先前的,就看把哪個屬性寫在順序後囉!
點我看範例

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

點我看範例

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

點我看範例

以上是今天的孩子系列,若有誤還請指正,謝謝!
本文同步發表於http://ithelp.ithome.com.tw/question/10138411

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Time limit is exhausted. Please reload the CAPTCHA.