继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【九月打卡】第19天+CSS3 结构性伪类选择器—nth-last-child(n)

一只杰尼龟0
关注TA
已关注
手记 24
粉丝 1
获赞 0

第一模块:十天精通CSS3 6-9 大漠
第二模块:

“: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;
}

演示结果:

第三模块:http://img4.mukewang.com/632da4fc00013e7c17150916.jpg

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP