CSS中有一種選擇器叫做基數選擇器,它能夠選擇一個元素序列中的某個基數元素(一般是奇數或偶數)。
/* 選擇所有奇數行 */ tr:nth-child(odd) { background-color: #f2f2f2; } /* 選擇所有偶數行 */ tr:nth-child(even) { background-color: #fff; }
以上代碼分別選擇了所有奇數行和偶數行,并設置了它們的背景顏色。
除了能選擇奇數或偶數元素,基數選擇器還能用表達式選擇任意的基數,例如:
/* 選擇第3n+1個元素(n從0開始) */ div:nth-child(3n+1) { background-color: #f2f2f2; }
以上代碼選擇了所有序號是3的倍數+1的元素,并設置了它們的背景顏色。
基數選擇器還支持一些關鍵字,如:first-child表示選擇序列中的第一個元素,而:last-child表示選擇序列中的最后一個元素。
/* 選擇第一個p元素 */ p:first-child { font-weight: bold; } /* 選擇最后一個p元素 */ p:last-child { font-style: italic; }
以上代碼分別將第一個p元素設置為粗體,最后一個p元素設置為斜體。
基數選擇器給我們帶來了方便快捷的元素選擇方式,能夠讓我們更加輕松地控制網頁樣式。