1. 程式人生 > 其它 >CSS3:CSS3中的結構偽類選擇器

CSS3:CSS3中的結構偽類選擇器

技術標籤:CSS筆記css3

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)其實就等同於even偶數;
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,很方便。