在CSS3中提供了一種新的語法格式,可以用于選中某個元素的倍數,這就是CSS3的倍數選擇器。常用的選擇器包括N、N+和N-,它們分別是用于選中元素的倍數、選中從某個元素開始的所有元素和選中前面的所有元素。
/*選中所有奇數行*/ tr:nth-child(odd) { background-color: #f2f2f2; } /*選中所有3的倍數的圖片*/ img:nth-child(3n) { border: 2px solid black; } /*從第4個div開始選中所有元素*/ div:nth-child(n+4) { background-color: #f2f2f2; } /*選中前面的所有輸入框*/ input:nth-child(-n+3) { border-color: red; }
使用CSS3的倍數選擇器可以非常方便地對網頁元素進行選取和樣式的修改。需要注意的是,倍數選擇器只能選中可計算的元素,比如文本節點和元素節點。如果被選的元素不是可計算的,那么這個選擇器就不起作用了。
一些常用的倍數選擇器包括:nth-child()、nth-last-child()、nth-of-type()和nth-last-of-type(),它們都可以在樣式上實現不同的效果。使用這些選擇器的時候需要注意它們的優先級,避免出現CSS沖突的情況。