CSS選擇器可以根據元素的位置來選取元素。而選取倒數第二個元素就可以使用偽類選擇器:
:nth-last-child(2)
這個選擇器會選擇當前元素的兄弟元素中,倒數第二個元素。比如:
<ul> <li>第一個元素</li> <li>第二個元素</li> <li>第三個元素</li> <li>第四個元素</li> </ul> ul li:nth-last-child(2) { background-color: red; }
上面的例子會選取第三個元素,并將它的背景色設為紅色。
需要注意的是,
:nth-last-child(2)選擇器只能選取倒數第二個元素,或者其他倒數的元素。如果要選取倒數第n個元素,則可以使用
:nth-last-child(n)選擇器。同樣的,如果要選取第n個元素,可以使用
:nth-child(n)選擇器。
另外需要注意的是,
:nth-last-child(n)選擇器選取的是當前元素的兄弟元素,而不是所有元素。比如:
<ul> <li>第一個元素</li> <li>第二個元素</li> <li>第三個元素</li> <div> <p>不會選中這個元素</p> </div> <li>第四個元素</li> </ul> ul li:nth-last-child(2) { background-color: red; }
上面的例子中,
:nth-last-child(2)選擇器只會選中第三個元素,而不會選中div中的元素。
利用CSS選擇器選取倒數第二個元素,可以幫助我們快速方便地對頁面元素進行修改和樣式設置。
下一篇單獨寫CSS文件