0

0

CSS first-child 和nth-child 区别是什么

藏色散人

藏色散人

发布时间:2021-01-07 09:12:33

|

3316人浏览过

|

来源于php中文网

原创

CSS first-child和nth-child区别:1、first-child是伪类选择器,表示匹配父元素的第一个子元素;2、nth-child表示匹配父元素的第n个子元素。

CSS first-child 和nth-child 区别是什么

本教程操作环境:windows7系统、css3版本、Dell G3电脑。

推荐:《css视频教程

first-child

E:first-child是伪类选择器,

立即学习前端免费学习笔记(深入)”;

匹配父元素的第一个子元素E

从说明可以看出E是你要选择的第一个子元素,而不是父元素。一开始,误以为E:first-child是E的第一个子元素。

:nth-child(n)

匹配父元素的第n个子元素E

E也是子元素,而且也只能匹配父元素下第n个子元素。n是从1开始计数

Giiso写作机器人
Giiso写作机器人

Giiso写作机器人,让写作更简单

下载
  • l1
  • l2
  • l3

若要选择

  • l1
  • ul>li:first-child

    若要选择

  • l2
  • ul>li:nth-child(2)

    h1

    p1

    p2

    p3

    这时选择第一个p元素,应用p:first-child则会出现错误,因为p的父元素是div,而对于div来说,它的第一个子元素不是p,而是h1,所以如果选择器p:first-child,则会出错。

    同理,E:last-child``E:only-child与上面的一样,E元素必须是其父元素的最后一个子元素或唯一一个子元素才可以

    更多编程相关知识,请访问:编程教学!!

    相关专题

    更多
    Java编译相关教程合集
    Java编译相关教程合集

    本专题整合了Java编译相关教程,阅读专题下面的文章了解更多详细内容。

    11

    2026.01.21

    C++多线程相关合集
    C++多线程相关合集

    本专题整合了C++多线程相关教程,阅读专题下面的的文章了解更多详细内容。

    4

    2026.01.21

    无人机驾驶证报考 uom民用无人机综合管理平台官网
    无人机驾驶证报考 uom民用无人机综合管理平台官网

    无人机驾驶证(CAAC执照)报考需年满16周岁,初中以上学历,身体健康(矫正视力1.0以上,无严重疾病),且无犯罪记录。个人需通过民航局授权的训练机构报名,经理论(法规、原理)、模拟飞行、实操(GPS/姿态模式)及地面站训练后考试合格,通常15-25天拿证。

    16

    2026.01.21

    Python多线程合集
    Python多线程合集

    本专题整合了Python多线程相关教程,阅读专题下面的文章了解更多详细内容。

    1

    2026.01.21

    java多线程相关教程合集
    java多线程相关教程合集

    本专题整合了java多线程相关教程,阅读专题下面的文章了解更多详细内容。

    4

    2026.01.21

    windows激活码分享 windows一键激活教程指南
    windows激活码分享 windows一键激活教程指南

    Windows 10/11一键激活可以通过PowerShell脚本或KMS工具实现永久或长期激活。最推荐的简便方法是打开PowerShell(管理员),运行 irm https://get.activated.win | iex 脚本,按提示选择数字激活(选项1)。其他方法包括使用HEU KMS Activator工具进行智能激活。

    2

    2026.01.21

    excel表格操作技巧大全 表格制作excel教程
    excel表格操作技巧大全 表格制作excel教程

    Excel表格操作的核心技巧在于 熟练使用快捷键、数据处理函数及视图工具,如Ctrl+C/V(复制粘贴)、Alt+=(自动求和)、条件格式、数据验证及数据透视表。掌握这些可大幅提升数据分析与办公效率,实现快速录入、查找、筛选和汇总。

    6

    2026.01.21

    毒蘑菇显卡测试网站入口 毒蘑菇测试官网volumeshader_bm
    毒蘑菇显卡测试网站入口 毒蘑菇测试官网volumeshader_bm

    毒蘑菇VOLUMESHADER_BM测试网站网址为https://toolwa.com/vsbm/,该平台基于WebGL技术通过渲染高复杂度三维分形图形评估设备图形处理能力,用户可通过拖动彩色物体观察画面流畅度判断GPU与CPU协同性能;测试兼容多种设备,但中低端手机易卡顿或崩溃,高端机型可能因发热降频影响表现,桌面端需启用独立显卡并使用支持WebGL的主流浏览器以确保准确结果

    25

    2026.01.21

    github中文官网入口 github中文版官网网页进入
    github中文官网入口 github中文版官网网页进入

    github中文官网入口https://docs.github.com/zh/get-started,GitHub 是一种基于云的平台,可在其中存储、共享并与他人一起编写代码。 通过将代码存储在GitHub 上的“存储库”中,你可以: “展示或共享”你的工作。 持续“跟踪和管理”对代码的更改。

    7

    2026.01.21

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    Sass 教程
    Sass 教程

    共14课时 | 0.8万人学习

    Bootstrap 5教程
    Bootstrap 5教程

    共46课时 | 2.9万人学习

    CSS教程
    CSS教程

    共754课时 | 21.5万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号