CSS中的nth指定選擇器是其中一種很有用的選擇器,它允許我們根據元素的位置或序號來選擇或改變元素的樣式。nth選擇符有兩種類型:nth-child和nth-of-type。
使用nth-child可以對父元素的所有子元素應用樣式。它接受一個表示元素序號的參數n,從1開始遞增,類似于數組的索引,參數可以是數字,也可以是表達式,比如nth-child(n),nth-child(2n),nth-child(2n+1)等。其中,"n"表示可變的數字,"+/-"表示加減。下面的代碼將會將所有奇數行的背景色設為灰色:
p:nth-child(odd) { background-color: gray; }
另一種nth選擇符是nth-of-type,它僅僅根據類型選擇元素,而不管它們在文檔中的位置。下面的代碼將會選中所有p元素中的第三個:
p:nth-of-type(3) { font-weight: bold; }
在使用nth選擇符時,還可以使用關鍵字even和odd來選擇偶數或奇數行或項。下面的代碼將選中所有偶數行的元素:
tr:nth-child(even) { background-color: lightgray; }
總的來說,nth選擇符是一種非常有用的選擇器,它借助數字和表達式表示法用于聚焦元素的位置和數量。它可以在CSS中優雅地組合和調整元素,讓編碼變得更簡單和友好。