前端技术学习之选择器(五)

六,结构性伪类选择器:first-child

:first-child选择器表示的是选择父元素的第一个子元素E。

代码例子:

结构性伪类<a href="http://www.51code.com/" target="_blank">选择器</a>—first-child

ul.ancestor li{

background-color: yellow;

}

ul.ancestor >li{

background-color: green;

}

ul.ancestor >li:first-child{

color: orange;

}

  • Link1

    文字颜色是橙色,超链接的color被浏览器样式覆盖了,所以才不是橙色

  • Link2

    关注文字颜色,不要关注超链接颜色

  • Link3

    关注文字颜色,不要关注超链接颜色

    • Link4

      关注文字颜色,不要关注超链接颜色

    • Link5

      关注文字颜色,不要关注超链接颜色

    • Link6

      关注文字颜色,不要关注超链接颜色

    • Link7

      不要关注超链接颜色

      运行效果:

      注:与first-child相似的list-child,应用起来和first-child一样只不过list-child选择的是最后一个元素。

    • 最后编辑于
      ©著作权归作者所有,转载或内容合作请联系作者
      【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
      平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

      相关阅读更多精彩内容

      • 所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性。在本...
        xxiao1988阅读 3,599评论 0 2
      • 一、CSS选择器常见的有几种? 基本选择器 通配选择器~选择文档中所有的html元素,用一个*表示 元素选择器~选...
        dengpan阅读 4,536评论 0 3
      • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
        秀才JaneBook阅读 7,546评论 0 25
      • 选择器 元素选择符 关系选择符 属性选择符 伪类选择符 伪对象选择符 一、元素选择符 通配选择符 (*):选择所有...
        云外之境阅读 5,888评论 0 0
      • 接上。 第七个咨询案例,在这里我不对案例做过多的分析,只谈谈自己的看法。面对未知领域,我们更多是好...
        玉书房阅读 3,211评论 0 1

      友情链接更多精彩内容