专栏首页用户2442861的专栏css选择器中:first-child与:first-of-type的区别

css选择器中:first-child与:first-of-type的区别

http://www.cnblogs.com/2050/p/3569509.html

:first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。比如有段代码:

p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素;

h1:first-child  匹配不到任何元素,因为在这里h1是div的第二个子元素,而不是第一个;

span:first-child  匹配不到任何元素,因为在这里两个span元素都不是div的第一个子元素;

然后,在css3中又定义了:first-of-type这个选择器,这个跟:first-child有什么区别呢?还是看那段代码:

p:first-of-type  匹配到的是p元素,因为p是div的所有类型为p的子元素中的第一个;

h1:first-of-type  匹配到的是h1元素,因为h1是div的所有类型为h1的子元素中的第一个;

span:first-of-type  匹配到的是第三个子元素span。这里div有两个为span的子元素,匹配到的是它们中的第一个。

所以,通过以上两个例子可以得出结论:

:first-child 匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。

:first-of-type 匹配的是某父元素下相同类型子元素中的第一个,比如 p:first-of-type,就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了。

同样类型的选择器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 也可以这样去理解。

分类: css+html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 浅谈UML的概念和模型之UML九种图

    http://blog.csdn.net/jiuqiyuliang/article/details/8552956

    bear_fish
  • python朴素贝叶斯实现-1( 贝叶斯定理,全概率公式 )

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/haluoluo211/article/d...

    bear_fish
  • HTML/CSS基础知识学习笔记

    http://www.cnblogs.com/scue/p/4276339.html

    bear_fish
  • Python正则表达式指南

    本文介绍了Python对于正则表达式的支持,包括正则表达式基础以及Python正则表达式标准库的完整介绍及使用示例。本文的内容不包括如何编写高效的正则表达式、如...

    小小科
  • Python学习笔记之Python正则表达式指南

    正则表达式并不是Python的一部分。正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个独立的处理引擎,效率上可能不如str自带的方法,但功能十分...

    Jetpropelledsnake21
  • Python|统计文本词汇出现次数

    有时在遇到一个文本需要统计文本内词汇的次数的时候,可以用一个简单的python程序来实现。

    算法与编程之美
  • python 文件读写和编码

    with open('somefile.txt', 'rt') as f: data = f.read()

    用户5760343
  • Python中如何统计文本词汇出现的次数?

    有时在遇到一个文本需要统计文本内词汇的次数的时候,可以用一个简单的python程序来实现。

    小小科
  • 爬虫必学知识之正则表达式下篇

    这是日常学python的第13篇原创文章 继上篇文章说了正则表达式的简单用法,那今天我们就继续说一下正则表达式的复杂的用法。好了,废话不多说,直接进入正题。 正...

    sergiojune
  • python正则表达式

      正则表达式(regex)是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配。

    yaohong

扫码关注云+社区

领取腾讯云代金券