CSS first-child last-child

説明

【first-child】選擇在任何父元素下第一個出現的指定元素
【last-child】選擇在任何父元素下最後一個出現的指定元素

範例

first-child

p 這是body下第1個p
p body之下第2個p
.parent
 p 這是parent下第1個p
 p parent下第2個p
p
 &:first-child
 color: #68cccc

.parent
 border: solid 1px #000

Display

這是body下第1個p

body之下第2個p

——以下開始parent div——

這是parent下第1個p

parent下第2個p

只要是任何父元素下面的第1個p,都會被選到然後變色

last-child

p 這是body下第1個p
p body之下第2個p
.parent
 p 這是parent下第1個p
 p parent下第2個p
p
 &:last-child
 color: #148282

.parent
 border: solid 1px #000

Display

這是body下第1個p

body之下第2個p

——以下開始parent div——

這是parent下第1個p

parent下第2個p

只要是任何父元素下面最後的p,都會被選到然後變色

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *