结构伪类

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

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

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

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

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

依次选中第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. 低功耗4G模组：Air780EP开发板RC522实例

    ​ 本文讲解合宙Air780EP开发板RC522实例,文末[阅读原文]获取最新资料. 本文档适用于Air780EP开发板 关联文档和使用工具 LuatOS-Soc固件获取 https://gitee. ...

  2. fork父子进程执行顺序

    使用一段代码来检查父子进程执行顺序 <?php $str = "hello world!" . PHP_EOL; // 派生一个子进程,子进程会复制主进程中的上下文 // p ...

  3. Apache+JK+Tomcat 负载平衡配置

    网 上关于 Apache + JK + Tomcat 的集群配置例子很多,按着例子配置下来,基本都能运行,不过,在一些重要的地方却没有进一步的说明.这次公司一个产品就是采用Apache+JK+Tomc ...

  4. golang之操作kafka

    安装第三方包: go get github.com/IBM/sarama 生产者实例: package main import ( "fmt" "github.com/I ...

  5. C#/.NET/.NET Core技术前沿周刊 | 第 16 期（2024年12.01-12.08）

    前言 C#/.NET/.NET Core技术前沿周刊,你的每周技术指南针!记录.追踪C#/.NET/.NET Core领域.生态的每周最新.最实用.最有价值的技术文章.社区动态.优质项目和学习资源等. ...

  6. win7下使用Aero2主题错误

    开发了一个gui工具,有同事在win7环境下发现界面无法加载出来. 经过调试发现,在view初始化的过程中,提示PresentationFramework.Aero2无法加载,异常信息如下: {Sys ...

  7. 《JavaScript 模式》读书笔记（7）— 设计模式2

    这一篇我们主要来学习装饰者模式.策略模式以及外观模式.其中装饰者模式稍微复杂一点,大家认真阅读,要自己动手去实现一下哦. 四.装饰者模式 在装饰者模式中,可以在运行时动态添加附加功能到对象中.当处理静 ...

  8. Vue3 面试题 （2023-09-26更新）

    Vue3 对比 Vue2 做了那些改进? 1. 响应式系统 vue2 中使用的 Object.defineProperty 实现的响应式,劫持整个对象,递归遍历所有属性,给每个属性添加 getter ...

  9. 2.mysql授权认证

    权限系统介绍 ● 什么是权限系统 权限系统是授予来自某个主机的某个用户可以查询.插入.修改.删除等数据库操作的权限 不能明确的指定拒接某个用户的连接 权限控制(授权与收回)的执行语句包括 create ...

  10. 在 .NET 下，Fiddler 不再抓取 Web Service 流量问题

    在 .NET 下,Fiddler 不再抓取 Web Service 流量问题 问题现象 原来的一个应用中,需要访问 SOAP 服务.在原来的 .NET Framework 版本中,使用 Fiddler ...