使用：nth-of-type（n）With Tables
為了使表格更易於閱讀，通過交替背景顏色設置行的樣式通常很有幫助。 設置表格樣式的最常用方法之一是設置每隔一行的背景顏色。 這通常被稱為“斑馬條紋”。
你可以做到這一點，通過設置每個其他行與一個CSS類，然後定義該類的風格。 這可行，但不是最好或最有效的方式去做。
使用此方法時，每次需要編輯該表時，都可能需要編輯表中的每一行，以確保每一行與更改一致。 例如，如果向表格中插入一個新行，它下面的每一行都需要更改該類。
CSS使斑馬條紋的表格變得很容易。 您不需要添加任何額外的HTML屬性或CSS類，只需使用：nth-of-type（n） CSS選擇器 。
nth-type-type（n）選擇器是CSS中的一個結構化偽類，允許您根據元素與父元素和同級元素的關係對元素進行樣式設置。 您可以使用它來根據它們的源順序來選擇一個或多個元素。 換句話說，它可以匹配每個元素是其父類的特定類型的第n個子元素。
字母n可以是關鍵字（如奇數或偶數），數字或公式。
例如，要使用黃色背景色對每個其他段落標籤進行樣式設置，您的CSS文檔將包括：
p：第n種（奇數）{
背景：黃色;
}
從你的HTML表格開始
首先，創建你的表，就像你通常用HTML寫的一樣。 不要將任何特殊的類添加到行或列中。
在你的樣式表中，添加下面的CSS：
tr：第n種（奇數）{
背景色：#CCC;
}
這將以第一行開始，以灰色背景色對每一行進行樣式設置。
樣式交替列以相同的方式
您可以對錶格中的列執行相同的樣式。 為此，只需將您的CSS類中的tr更改為td。 例如：
td：第n種（奇數）{
背景色：#CCC;
}
在第n個（n）選擇器中使用公式
在選擇器中使用的公式的語法是+ b。
a是表示週期或索引大小的數字。
n實際上是字母“n”並且代表一個計數器，它在0處出現。
+是一個操作符，它也可以是“ - ”
b是一個整數並表示偏移值 - 例如，選擇器開始應用背景顏色時向下多少行。 如果運算符包含在公式中，則這是必需的。
例如，如果您想為每個第三行設置背景顏色，那麼您的公式將為3n + 0。 你的CSS可能看起來像這樣：
tr：第n種（3n + 0）{
背景：slategray;
}
使用n型選擇器的有用工具
如果使用偽類型的第n種選擇器的公式方面感覺有點失落，請嘗試：第n個測試器站點作為一個有用的工具，它可以幫助您定義實現所需外觀的語法。 使用下拉菜單選擇第n種類型（您也可以在這裡嘗試其他偽類，例如，第n個孩子）。