在CSS中,經常會用到某個選擇器在列表項中的第3個、第6個、第9個…以此類推。這個選擇器就是3的倍數選擇器,也叫nth-child(3n)。
下面是一個例子,我們想對某個ul列表中的3的倍數項進行樣式修改:
ul li:nth-child(3n) { background-color: #ccc; color: #333; }
這個選擇器規定了ul列表中的每個li元素,選擇它的第3個、第6個、第9個…以此類推進行樣式修改。注意,這不是說選擇器只選擇li元素,而是說在ul列表中的每個位置取3的模余數為0的元素。
除了3n這種寫法外,我們還可以使用3n+1、3n+2等形式。它們的作用是選擇ul列表中除去被3整除的第1項和第2項,所以也可以寫成如下代碼:
ul li:nth-child(3n+1), ul li:nth-child(3n+2) { background-color: #fff; color: #333; }
總之,3的倍數選擇器是一個很好用的工具,能夠幫助我們方便地修改列表項的樣式,同時也可以進一步了解CSS中選擇器的特點。