css选择器之 :first-child / last-child

:first-child 

          单独使用这个选择器不带任何前缀,选择的是作为 “ 某个元素 ” 的 “ 第一个子元素 ” 的元素 ,某个元素是文档里的任意元素(即所有元素)第一个子元素可以是任意的元素,要想明白这个子元素,很好的一个方式是使用jquery,在浏览器控制台使用 $(":last-child") 查看选择出来的元素就可以一目了然。

div:first-child

            理解了上面的  “ :last-child ” 选择器,这个就好理解了,这个选择器选择 “ 某个元素 ” 的第一个为div的子元素;这里的某个元素的也是文档里的任意元素

理解了以上选择器选择的元素就好办,现在就可以和其他选择器一起使用,使得定位更精确,比如

demo

选择 class为 mainmenu的元素 下面的最后一个li元素中的a元素

.mainmenu a:last-hild

解释:选择 .mainmenu下的  某个元素的  最后一个为a元素的  子元素;这里对.mainmenu使用的是后代选择器,所以他会循环的匹配.mainmenu的所有后代元素中第一个为a的子元素。关于 "后代元素" 和 "子元素" 的区别可以看W3C,以后就算遇到各种不同类型的组合选择器也可以按照以上的方式读代码

first-child W3C定义:

w3c定义

“ 选取属于其父元素的首个子元素的指定选择器 ”  这句话容易让人很含糊,谁是 “ 其 ”? 谁是 “ 父元素 ”?难道这是翻译英文过来的句子吗?这么别扭的表达!我个人觉得这里的 “其父元素” 可以理解为 “文档中的某一个子元素”,那么上述定义就可以理解为

:first-child 是用于选取文档中某个元素的第一个子元素的选择器

所以使用这两个选择器需要特别小心,因为他匹配的范围是整个文档!所以一般使用中都会配合其他的选择来一起使用,缩小选择范围。

那么能不能指定去选择某个元素的第一个或最后一个子元素呢? 这个问题就个各自发挥吧!

注意:他选择的是子元素哦,而不是包含这个子元素的父元素;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 其实平时用得多的选择器无非也就是那么几个,时间久了,许多不常用的选择器就慢慢忘记了。为了不让自己忘记这些选择器,今...
    盛夏晚清风阅读 1,878评论 0 5
  • (一)结构性伪类选择器——first-child “:first-child”选择器表示的是选择父元素的第一个子元...
    Mandy_jin阅读 2,191评论 0 1
  • 1.CSS 元素选择器 最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 H...
    饥人谷_小侯阅读 890评论 0 1
  • 1.class 和 id 的使用场景? 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也...
    草鞋弟阅读 2,494评论 0 1
  • 一、CSS选择器常见的有几种? 基本选择器 通配选择器~选择文档中所有的html元素,用一个*表示 元素选择器~选...
    dengpan阅读 983评论 0 3