nth-child,nth-of-type

首先，這兩個選擇器是用來幹什麼的？ 舉例子 p：nth-child(1);這個選擇器選擇的是p全部父輩元素中第一個子元素，且這個子元素爲p，此時就生效。 p:nth-of-type（1）;這個選擇器選擇的是p全部父輩元素中全部p元素集合中第一個p元素生效。 看下面的例子

div11111111

111111111111

222222222222

s111111111111

s2222222222222

css .p1:nth-of-type(1){ background-color: red; } 這時候，11111111和s11111111會變紅。首先選擇的是.p1的全部父輩元素中全部.p1元素集合中第一個，因此就是1111111和s111111 若是是.p1:nth-child(1)則只有s11111111會變紅，緣由是.p1全部父輩元素( .div1 和 .div11)而後找到他們下面的第一個元素而且是.p1的，而.div1下面的第一個元素是div不是.p1因此沒法知足，因此不顯示，.div11下面的第一個元素是.p1因此就顯示了。 這兩個選擇器還有好多功能呢. :nth-child(n+4)選取大於等於4標籤，「n」表示從整數，下同 :nth-child(-n+4)選取小於等於4標籤 :nth-child(2n)選取偶數標籤，2n也能夠是even :nth-child(2n-1)選取奇數標籤，2n-1能夠是odd :nth-child(3n+1)自定義選取標籤，3n+1表示「隔二取一」 :last-child選取最後一個標籤 :nth-last-child(3)選取倒數第幾個標籤,3表示選取第3個