请选择 进入手机版 | 继续访问电脑版

湖南新梦想

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 95|回复: 0

first-child,last-child,nth-child,first-of-type,last-of-type区别

[复制链接]

12

主题

12

帖子

69

积分

注册会员

Rank: 2

积分
69
发表于 2022-6-21 20:38:06 | 显示全部楼层 |阅读模式
1.first-child(IE7兼容)、last-child(IE8不兼容)
html:
<body>
  <h2>列表</h2>
  <ul>
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
    <li>列表项目4</li>
  </ul>
</body>
css:
<style>
    ul {list-style: none;}
    li:first-child {/*给第一个列表项目设置样式 兼容IE7*/
      background-color: pink;
    }
    li:last-child { /*给最后一个列表项目设置样式 IE8不兼容*/
      background-color: red;
    }
</style>
解析:
一个页面中无论有几个ul列表,只要设置first-child、last-child,那么所有ul列表项的第一个和最后一个列表项目都会有设置的样式。
2.nth-child、nth-last-child (IE8不兼容)
html:
<body>
  <h2>列表</h2>
  <ul>
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
    <li>列表项目4</li>
    <li>列表项目5</li>
    <li>列表项目6</li>
  </ul>
</body>
css:
<style>
    ul {list-style: none;}   
    li:nth-child(3) { /*表示li元素中,第三个元素 IE8不兼容*/
      background-color: pink;
    }
    li:nth-last-child(2) { /*表示li元素中,倒数第二个元素 IE8不兼容*/
      background-color: red;
    }
</style>

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|湖南新梦想 ( 湘ICP备18019834号-2 )

GMT+8, 2022-8-8 02:58 , Processed in 0.043291 second(s), 19 queries .

Powered by Discuz! X3.4 Licensed

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表