使用CSS的奇偶賦值可以很好地優(yōu)化頁面顯示效果。CSS中的選擇符可以根據(jù)元素的位置來進(jìn)行選擇,奇偶數(shù)是一個很好的選擇方式。
/* 選擇偶數(shù)行 */ tr:nth-of-type(even) { background-color: #f2f2f2; } /* 選擇奇數(shù)行 */ tr:nth-of-type(odd) { background-color: #ffffff; } /* 選擇偶數(shù)列 */ td:nth-of-type(even) { background-color: #f2f2f2; } /* 選擇奇數(shù)列 */ td:nth-of-type(odd) { background-color: #ffffff; }
以上代碼是加入CSS的奇偶數(shù)選擇器。選擇器可以通過使用nth-of-type偽類來選擇奇偶數(shù)。對于偶數(shù)行或偶數(shù)列,可以設(shè)置一個淺一點的背景顏色;對于奇數(shù)行或奇數(shù)列,可以設(shè)置一個深一些的背景顏色。在表格或其他分列布局中會有很好的效果。
另外,需要注意的一點是這些選擇器都是從1開始計數(shù)的,而不是從0開始計數(shù),所以第一行或第一列被視為奇數(shù)行或列。如果需要將第一行或列排除在外,可以使用nth-child或者nth-of-type來選擇。
/* 排除第一行,并選擇偶數(shù)行 */ tr:nth-child(n+3):nth-of-type(even) { background-color: #f2f2f2; } /* 排除第一列,并選擇偶數(shù)列 */ td:nth-child(n+2):nth-of-type(even) { background-color: #f2f2f2; }
以上代碼將排除第一行或第一列,然后選擇偶數(shù)行或偶數(shù)列。這個技巧也可以用在很多其他的布局中。