CSS3:CSS3中的結構偽類選擇器
阿新 • • 發佈:2021-01-07
CSS3對於PC端有相容性,但對於移動端更友好些。
選擇符 | 用法簡介 |
---|---|
E:first-child | 匹配父元素中的第一個子元素E |
E:last-child | 匹配父元素中最後一個E元素 |
E:nth-child(n) | 匹配父元素的第n個子元素E |
例如:
<style>
/*選擇ul中的第一個子元素li*/
ul li:first-child {
color:pink;
}
/*選擇ul中的第最後個子元素li*/
ul li:last-child {
color:skyblue;
}
/*選擇ul中的第3個子元素li*/
ul li:nth-child(3) {
color: green;
}
</style>
<ul>
<li>第一個</li>
<li>第二個</li>
<li>第三個</li>
<li>第四個</li>
</ul>
其中nth-child(n)中的n可以是數字、關鍵字和公式。
n是關鍵字:可以是偶數even,也可以是奇數odd,當nth-child(even)時,會把偶數的選中,nth-child(odd)時會把奇數的選中。
n是公式:n是從0開始計算的,0×1 1×2 2×2 3×2 4×2…,
ul li:nth-child(2n+1)其實就等同於odd奇數;
如果想選5的倍數,可以這樣寫:ul li:nth-child(5n),也就是0×5 1×5 2×5 3×5 4×5…,想選3的倍數就3n,4的倍數就4n,很方便。