22. CSS3 结构性伪类选择器 :nth-last-child(n)
: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; }
效果如下:
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 22. CSS3 结构性伪类选择器 :nth-last-child(n)
码云笔记 » 22. CSS3 结构性伪类选择器 :nth-last-child(n)