解释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. 为什么 Java 不是纯面向对象语言？

    什么是纯面向对象语言? 纯面向对象语言或完全面向对象语言是指完全面向对象的语言,它支持或具有将程序内的所有内容视为对象的功能.它不支持原始数据类型(如 int,char,float,bool 等).编 ...

  2. 使用configparser模块进行封装，构造配置文件处理器

    from configparser import ConfigParser class HandleConfig: ''' 定义一个配置文件处理类 ''' def __init__(self, fil ...

  3. vscode开发微信小程序使用less（插件Easy WXLESS）

    1.搜索按照Easy WXLESS 2.在文件中加入下面的一行代码:就会在同级目录下同步代码到.wss // out: index.wxss 更多的写法可以查官网:https://marketplac ...

  4. 易飞ERP API接口调用DEMO

    一.使用场景: 1.需要开放ERP数据给第三方系统对接,如APP手机端开发,MES,OA等: 2.接口按现在主流开发,restful风格,传JSON数据,跨平台,不限开发工具: 3.不限易飞ERP,支 ...

  5. 如何将两个/多个PDF文件合并成一个？

    原文链接:https://docsmall.com/blog/how-to-merge-pdf 工作中我们总会遇到将PDF合并的问题,比如: 多次扫描的PDF文件,需要合并到一个 PDF文件需要追加一 ...

  6. Java8 日期和时间API

    LocalDate.LocalTime.Instant.Duration.Period 1.1使用LocalDate和LocalTime 1.1.1LocalDate的创建方式和相关方法使用示例 @T ...

  7. 常见的Web源码泄露总结

    常见的Web源码泄露总结 源码泄露方式分类 .hg源码泄露 漏洞成因: hg init 的时候会生成 .hg 漏洞利用: 工具: dvcs-ripper .git源码泄露 漏洞成因: 在运行git i ...

  8. fatal error: iconv.h: No such file or directory

    CodeLite CodeLite编译(使用Cygwin Toolchain)出现如下错误: fatal error: iconv.h: No such file or directory 解决办法 ...

  9. Kotlin介绍（非原创）

    文章大纲 一.Kotlin简介二.Kotlin相比Java优势三.Kotlin与Java混合使用四.参考文章   一.Kotlin简介 1. 什么是Kotlin 安卓和Java,前者是最受欢迎的移动开 ...

  10. 将vue2.9.6升级到vue3.0

    vue2.9.6没有ui界面可以用,直接使用yarn global add @cli没用,还是2.9.6版本 借鉴博客: https://juejin.im/post/5bf7d67c51882518 ...