CSS选择器 :first-of-type/:last-of-type/ :first-child/:last-child 用法

官方链接：CSS3 :first-of-type 选择器

 <div class="parent"><span class="child child1">child1</span><span class="child child2">child2</span><div class="child child3">child3<div>child3-1</div><div>child3-2</div></div><div class="child child4">child3<div>child4-1</div><div>child4-2</div></div></div>

:first-child 使用，是所有元素中的第一个满足条件就会被选中

// 设置 parent 下面的 第一个child 里面的字体颜色
.parent .child:first-child {color: blue;  // parent 下面的第一个元素 如果是 child 才会被选中
}

:first-of-type使用，是每一个元素中的第一个都满足条件才选中

.parent .child:first-of-type {color: blue;// parent 下面 第一个满足该条件的元素如果是child就变成蓝色// 例如 我写的 第一个span/ 第一个div 都是 满足 child，就会被选中// 如果我的第一个span不是child，那么两个span 都不会被选中
}

CSS选择器 :first-of-type/:last-of-type/ :first-child/:last-child 用法相关推荐

CSS选择器的声明与嵌套
CSS选择器的声明与嵌套使用CSS选择器控制HTML标记的时候,每个选择器的属性可以一次声明多个,选择器本身也可以同时声明多个. 并且,任何形式的选择器,都是合法的,标记选择器,class选择器和I ...
CSS 选择器：BeautifulSoup4解析器
和 lxml 一样,Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. lxml 只会局部遍历,而Beautiful Soup 是基 ...
最常用的css选择器及兼容性 +几个好用却不多见的 nth-child等
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
css 选择器（标签选择器、类选择器、层级选择器、id选择器、组选择器、伪类选择器、通配符选择器）
css 选择器的定义 css 选择器是用来选择标签的,选出来以后给标签加样式. css 选择器的种类标签选择器类选择器层级选择器(后代选择器) id选择器组选择器伪类选择器通配符选择器标 ...
10-CSS基础-CSS选择器
CSS选择器标签选择器什么是标签选择器? 作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性格式: 标签名称{属性:值; } 注意点: 标签选择器选中的是当前界面中所 ...
调研CSS选择器在浏览器中的支持情况
网上有很多这样的信息,很多的图表对各个浏览器进行比较,关于特性的支持,其实有些不全面,本文就日常常见的一些css选择器进行一个总结(本文在标准模式下). 1)关于:active,:link,:hove ...
jQuery原理系列-css选择器实现
jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和doc ...
基本CSS选择器,复合选择器,后代选择器
基本CSS选择器有标记选择器.类别选择器.ID选择器3种 1.标记选择器每一种HTML标记的名称都可以作为相应的标记选择器的名称,如h1,p,等等 2.类别选择器类别选择器的名称可 ...
css选择器匹配没有属性x的元素[重复]
本文翻译自:css selector to match an element without attribute x [duplicate] This question already has an ...
2 - 前端基础--CSS 选择器
引入css方式(重点掌握) 1.行内样式 <div> <p style="color: green">我是一个段落</p></div> ...

CSS选择器 :first-of-type/:last-of-type/ :first-child/:last-child 用法

CSS选择器 :first-of-type/:last-of-type/ :first-child/:last-child 用法相关推荐

最新文章

热门文章