“:nth-last-child(n)”選擇器和前面的“:nth-child(n)”選擇器非常的相似,只是這里多了一個“last”,所起的作用和“:nth-child(n)”選擇器有所區別,從某父元素的最后一個子元素開始計算,來選擇特定的元素。
案例演示
選擇列表中倒數第五個列表項,將其背景設置為橙色。
HTML代碼:
<ol> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> <li>item9</li> <li>item10</li> <li>item11</li> <li>item12</li> <li>item13</li> <li>item14</li> <li>item15</li> </ol>?
CSS代碼:
ol > li:nth-last-child(5){ background: orange; }
演示結果:
在CSS編輯第一行輸入正確代碼,修改列表倒數第五項的背景色為橙色。
nth-last-child標簽是否書寫正確
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報