解释CSS3 中新增的选择器中最具有代表性的就是序选择器，大致可以分为两类：

（1）同级别的第几个（2）同类型的第几个

先写一个公共代码

<body>

<h1>优秀</h1>

<p>我是一梯队</p>

<p>我是一梯队</p>

<p>我是一梯队</p>

<div>

    <p>我是第二梯队</p>

    <p>我是第二梯队</p>

    <p>我是第二梯队</p>

</div>

</body>

1.选中同级别中的第一个

标签：first-child｛属性：值｝

注意点：不区分类型，只管取第一个，不管第一个是什么标签

        p:first-child{

            color:red;

        }

解释：在同级别中只选取第一个为h1标签和div下的p标签，然后在这些里面只选p标签，进行标红。

2.选中同级别中同类型的第一个

标签：first-of-type{属性：值；}

例子：

        p:first-of-type{

            color:red;

        }

解释：先选出所有的p标签，然后在这些p标签中每一个同级别的在选出一个。

3.选中同级别中的最后一个

标签：last-child{属性：值；｝

4.选中同级别中同类型的最后一个

标签：last-of-type{属性：值；}

5.选中同级别中的第n个

标签：nth-chirld（n）:{属性：值；｝

6.选中同级别中同类型的第n个

标签：nth-of-type(n):{属性：值；｝

7.选中同级别中的倒数第n个

标签：nth-last-chirld（n）:{属性：值；｝

8.选中同级别中同类型的倒数第n个

标签：nth-last-of-type(n):{属性：值；｝

二、源码：d77_order_selector_first

地址:

https://github.com/ruigege66/HTML_learning/blob/master/d77_order_selector_first

2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）

3.博客园：https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号：傅里叶变换，后台回复“礼包”获取Java大数据学习视频礼包

HTML连载21-序选择器上的更多相关文章

  1. H5 20-属性选择器上

    20-属性选择器上 --> 我是段落1 我是段落2 我是段落3 我是段落4 我是段落5 <!DOCTYPE html> <html lang="en"> ...

  2. HTML连载23-属性选择器（上）

    一.属性选择器 1. (1)定义:根据指定的 属性名称找到对应的标签,然后设置属性 (2)格式:标签[属性=值]:{属性:值:] 注意:前一个值是不带引号的 (3)例子: <style> ...

  3. 第 13 章 CSS 选择器[上]

    学习要点: 1.选择器总汇 2.基本选择器 3.复合选择器 4.伪元素选择器 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 选择器,通过选择器定位到想要设置样式的元素.目前 CSS 选择器的 ...

  4. 从零开始学习html（八）CSS选择器——上

    一.什么是选择器? <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...

  5. HTML连载20-并集选择器&兄弟选择器

    一.并集选择器 1.作用:给所有的选择器选中的标签设置属性. 2.格式: 选择器1,选择器2{ 属性:值: } 3.例如: .abc1,#abc2{ color:red; } .......省略代码. ...

  6. jQuery中的选择器(上)

    从学习jquery开始,现在已经是第三遍看锋利的jQuery这本书了,现在打算对jQuery中的各种选择器进行一下总结,主要是是为了进一步系统的巩固自己对知识的掌握,另外也可以为那些学习jQuery并 ...

  7. redis 系列21 复制Replication (上)

    一.   概述 使用和配置主从复制非常简单,每次当 slave 和 master 之间的连接断开时, slave 会自动重连到 master 上,并且无论这期间 master 发生了什么, slave ...

  8. Css选择器(上) 让样式无孔不入

    css选择器    一个可以选择样式的工具, 这里适用于无论是内部代码还是外部引用 abc.css 这类型的文件. 基本选择器*{ }        就是一个简单的*, 代表应用于全部. 不适合于个性 ...

  9. HTML连载19-子元素选择器&交集选择器

    一.子元素选择器 1.定义:找到指定标签中所有特定的直接子元素,然后设置属性 2.格式: 标签名称一>标签名称2{ 属性:值: } 3.释义:先找到叫做“标签名称1”的标签,然后在这个标签中查找 ...

随机推荐

  1. Flink1.7.2安装部署的几种方式

    原文链接:https://blog.csdn.net/a_drjiaoda/article/details/88037282 前言:Flink的运行一般分为三种模式,即local.Standalone ...

  2. 【Linux命令】EOF自定义终止符

    EOF自定义终止符用法 我们在脚本中经常会发现使用EOF的情况.EOF可以结合cat命令对内容进行追加.比如:执行脚本的时候,需要往一个文件里自动输入多行内容.如果是少数的几行内容,可以用echo命令 ...

  3. 一段不错的iframe自适应的代码直接拿来用了

    一段不错的iframe自适应的代码直接拿来用了 <?php echo " <!DOCTYPE html> <html lang='en'> <head&g ...

  4. Nagios 钉钉报警

    第一章 创建钉钉应用(用于发送报警信息给单独某个用户) 打开钉钉管理后台: https://oa.dingtalk.com 创建成功后需要记录三个值"AgentID"," ...

  5. java基础(7):自定义类、ArrayList集合

    1. 引用数据类型(类) 1.1 引用数据类型分类 提到引用数据类型(类),其实我们对它并不陌生,如使用过的Scanner类.Random类. 我们可以把类的类型为两种: 第一种,Java为我们提供好 ...

  6. DevExpress的TextEdit控件没法调整高度解决

    场景 Winform控件-DevExpress18下载安装注册以及在VS中使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1 ...

  7. CSS边框使用-基础

    前端开发工作中经常会碰到奇形怪状的图形,当然也少不了UI设计童鞋的脑洞和创意啦,初级的开发人员可能会选择使用图片做背景加上位置属性实现,不过很多时候,CSS能实现的就不要再动用PS等工具了,时间宝贵, ...

  8. IAP15W4K58S4引脚定义 STC15

  9. 【Web】解决简书图片不显示问题“系统维护中，图片暂时无法加载”

    简书不显示图片的解决方法 首次编辑于2019-6-6 最近几天在浏览简书上的文章时,发现图片显示不出来,提示"系统维护中,图片暂时无法加载". 猜测应该是简书由于某种原因暂时屏蔽了 ...

  10. linux查询及添加用户

    1.查询用户. 存储帐号的文件:/etc/passwd 存储密码的文件:/etc/shadow Cat  /etc/passwd Cat  /etc/shadow 2.添加用户 输入命令: usera ...