在CSS中,選擇第n個元素非常常見。這種選擇器可以讓你精確地選擇某個特定位置的元素,而不必改變HTML結構或添加一些其他的類或ID。在CSS選擇第n個的技巧中,我們將探討幾種方法來利用這種選擇器。
/* 選擇每個列表中的第1個元素 */ li:nth-child(1) { background-color: #ff0000; } /* 選擇每個列表中的倒數第2個元素 */ li:nth-last-child(2) { background-color: #00ff00; } /* 選擇每個列表中的偶數元素 */ li:nth-child(even) { background-color: #0000ff; } /* 選擇每個列表中的奇數元素 */ li:nth-child(odd) { background-color: #ffff00; } /* 選擇每個列表中的第2個元素 */ li:nth-child(2) { background-color: #000000; } /* 選擇每個列表中的前3個元素 */ li:nth-child(-n+3) { background-color: #ffffff; } /* 選擇每個列表中從第4個元素開始的所有元素 */ li:nth-child(n+4) { background-color: #333333; }
通過使用這些CSS規則,您可以相當方便地選擇任何列表中的任何元素。僅僅是選擇元素的父級,然后添加一個nth-child規則。您甚至可以使用這些選擇器來創建示例效果,例如創建網格布局。
上一篇css選擇第一個子類
下一篇w3.css 前景