课时77.序选择器（掌握）

appetizerio 发布于2019-04-23 13:37 / 834人阅读

CSS3中新增的选择器最具代表性的就是序选择器。

1.同级别的第几个

1. :first-child 选中同级别中的第一个标签

注意点：不区分类型

但是我们这里有一个注意点，如果我们在第一个p之前加一个h1，则第一个p就不变红了，因为我们是选中同级别中的第一个标签，在我们这个界面中，h1，p，div是同级别的，所以第一个p不变色。

2. :last-child 选中同级别中的最后一个标签

注意点：不区分类型

3. :nth-child(n) 选中同级别中的第几个标签

注意点：不区分类型

现在想给我是段落7设置成红色，我是段落7是我们同级别中的第三个，我们应该这么写

为什么我是段落2也变色了？因为对于body来说，h1，3个p和div都是同级别的，所以我选中同级别的第三个就也选中了我是段落2.

4. :nth-last-child(n) 选中同级别中的倒数第几个标签

5. :only-child 选中父元素中唯一的元素

首先看body元素中有两个元素，一个p，一个div，所以不是唯一元素，所以不变色，而div下只有一个p，所以变色，而如果在div下再添加一个h1标签，则它们都不变色了，因为div下有两个元素了，不是唯一都了

2.同类型的第几个

1. :first-of-type 选中同级别中同类型的第一个标签

来看下面的例子：

怎么给我是段落1 设置成红色呢？

首先，h1，两个p，div是同级别的，而在这个同级别中，两个p又是同类型的，所以我是段落1就是同类型的第一个，那我们有没有办法取出同级别中同类型的第一个呢？就用我们下面的方法：同类型的第几个。

2. :last-of-type 选中同级别中同类型的最后一个标签

我们现在想让我是段落2和我是段落5都变色，那么我们需要怎么做？

我们需要取出同级别同类型的最后一个，这个时候就取出了我是段落2和我是段落5

3. nth-of-type(n)选中同级别中同类型的第几个标签

现在我要给我是段落3，我是段落7设置颜色，因为我是段落7是第三个，而我是段落3不是第三个，所以这是，我们要用到同级别，同类型的第三个

4. :nth-last-of-type 选中同级别中同类型的倒数第几个标签

5. only-of-type 选中父元素中唯一类型的某个标签

现在我想选中我是段落2，虽然它不是唯一的标签，我也想选中它，应该这么写

这时我发现我是段落1与我是段落2都变色了，因为在body中有唯一类型的p标签，而在div下也有唯一类型的p标签，所以这两个都改变颜色了

专线服务 idc机房托管课时选择器派生选择器省市选择器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2117.html

课时78.序选择器下（掌握）

摘要：如果我们现在有一个需求，我想把所有的倍数改变颜色，应该怎么办呢然后只要是的倍数就改变颜色了，，，这个，用户自定义，然后它就会选中满足你公式的这一行。:nth-child(odd)选中同级别中的所有奇数 :nth-child(even)选中同级别中的所有偶数 :nth-of-type(odd)选中同级别中的所有奇数 :nth-of-type(even)选中同级别中的所有偶数如果从中还有...

tomato 2019-04-23 13:37 评论0 收藏0
我是如何学习游戏引擎的？

摘要：下面列举了游戏开发中常见的岗位以及两条常见的协作开发的流水线其实学习游戏引擎，前期对于任何岗位来说路线都是相似的，基本上就是一个熟悉基本操作理解基本概念拓展专业知识的过程。当然这不是绝对的，任何引擎的开始阶段和大成阶段都是相似的。这是【游戏开发那些事】第51篇原创前言：游戏引擎，表面...

未东兴 2021-09-30 09:48 评论0 收藏0
Java面试 32个核心必考点完全解析

摘要：如问到是否使用某框架，实际是是问该框架的使用场景，有什么特点，和同类可框架对比一系列的问题。这两个方向的区分点在于工作方向的侧重点不同。 [TOC] 这是一份来自哔哩哔哩的Java面试Java面试 32个核心必考点完全解析（完）课程预习 1.1 课程内容分为三个模块基础模块：技术岗位与面试计算机基础 JVM原理多线程设计模式数据结构与算法应用模块：常用工具集 ...

JiaXinYi 2019-08-16 16:53 评论0 收藏0
课时76.兄弟选择器（掌握）

摘要：我们先来明确一点，什么是兄弟比如，和是兄弟，必须是同级关系，如果是嵌套关系，儿子，孙子则不可以。我们先来明确一点，什么是兄弟？比如，head和body是兄弟，必须是同级关系，如果是嵌套关系，儿子，孙子则不可以。 1.相邻兄弟选择器 CSS2 作用：给指定选择器后面紧跟的那个选择器选中的标签设置属性格式：　　　　　　选择器1+选择器2{ 　　　　　　　　　　　　属性：值; } 我们将两...

snowLu 2019-04-23 13:37 评论0 收藏0
课时71.后代选择器（掌握）

摘要：什么是后代选择器作用找到指定标签的所有后代标签，设置属性。首先你要明确什么是后代你的儿子，孙子，重孙子等，只要有你的血脉的，都是你的后代。1.什么是后代选择器？作用：找到指定标签的所有后代标签，设置属性。首先你要明确什么是后代？你的儿子，孙子，重孙子等，只要有你的血脉的，都是你的后代。我们先来举个例子我们想让div中的标签变红 1.用标签选择器可以做吗？不可以，它会选中页面上的...

lixiang 2019-04-23 13:37 评论0 收藏0