CSS中,我們可以使用“:nth-child”或者“:nth-of-type”偽類來選取指定位置的元素。
首先,我們來看“:nth-child”偽類。該偽類用于選取某個元素的父元素中的指定位置的子元素。
/* 選取某個元素的父元素中的第2個子元素 */ .parent :nth-child(2) { /* styles */ }
如果想要選取某個元素的父元素中的特定倍數的子元素,可以使用“an+b”的形式來指定。如下所示:
/* 選取某個元素的父元素中的3的倍數的子元素 */ .parent :nth-child(3n) { /* styles */ }
接下來,我們來看“:nth-of-type”偽類。該偽類用于選取某個元素的父元素中指定類型的元素的位置。
/* 選取某個元素的父元素中的第2個p元素 */ .parent p:nth-of-type(2) { /* styles */ }
同樣,也可以使用“an+b”的形式來選取特定倍數的指定類型的元素。
/* 選取某個元素的父元素中的3的倍數的p元素 */ .parent p:nth-of-type(3n) { /* styles */ }
總之,在CSS中,使用“:nth-child”和“:nth-of-type”偽類可以非常方便地選取指定位置的元素。
上一篇css 選中后變色