解释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. 将tf-faster-rcnn检测结果画在一张图像内

    https://blog.csdn.net/weixin_42111393/article/details/82940681

  2. Python的定时执行

    最近手把手教妹子写Python,被一篇博客误导了,这里记录一下. 妹子需要的是一个定时闹钟,到点往钉钉群里推个消息.她一顿搜索猛如虎,参照着其他人的博客,搞了一个while: target_time ...

  3. Python爬虫反反爬：CSS反爬加密彻底破解！

    刚开始搞爬虫的时候听到有人说爬虫是一场攻坚战,听的时候也没感觉到特别,但是经过了一段时间的练习之后,深以为然,每个网站不一样,每次爬取都是重新开始,所以,爬之前谁都不敢说会有什么结果. 前两天,应几个 ...

  4. SSM定时任务(spring3.0)

    SSM定时任务主要分为两部分 1.applicationContext.xml配置文件设置 设置如下: 在xmlns中添加:xmlns:task="http://www.springfram ...

  5. Java生鲜电商平台-生鲜供应链(采购管理)

    Java生鲜电商平台-生鲜供应链(采购管理) 在生鲜供应链系统中采购中心这一模块,它是电商公司管理采购的模块,包含供应商管理,采购订单管理,采购商品管理,在该模块中采购订单是采购中心的核心模块.在其他 ...

  6. 网站的favicon图标

    网站的favicon图标 favicon.ico一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者标签上. 制作favicon图标 把图片转换为png图片 把png图片转换为ico图标,这需要借助 ...

  7. [b0021] python 归纳 (七)_获得进程和线程信息

    # -*- coding: utf-8 -*- """ 获得线程, 进程 ID,NAME 总结: """ import threading ...

  8. k8s资产清单（二）

    什么是清单 说白了清单是k8s当中用来定义pod的文件,语法格式遵循yaml语法,在yaml当中可以定义控制器类型,元数据,容器端口号等等等....,也可以针对于清单对pod进行删除等操作 为什么太学 ...

  9. 一套从alpine基本镜像到node8.16.2的全套dockerfile

    这个花了点时间,可以正式跑起来了. 加了常用的工具及中文时区,非root帐号. 除了pm2,其它的module放到应用程序本身的node_modules目录下来实现的. 一,3rd_part/node ...

  10. vlmcsd

    scp ./vlmcsd-x64-musl-static xxx@host.ip:/opt/kms/ chmod u+x /opt/kms/vlmcsd-x64-musl-static ./vlmcs ...