结构伪类

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

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

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

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

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

依次选中第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. 干货分享 | PCB测试点的用途

    ​ PCB测试点长什么样子?请看下图: ​ 如果你曾经用过NOKIA手机,每次你打开后盖换电池的时候,每次看到的那两排圆形的点--就是PCB测试点,or you can call it Test Po ...

  2. JAVA并发编程学习笔记之synchronized

    监视器 java中同步是通过监视器模型来实现的,JAVA中的监视器实际是一个代码块,这段代码块同一时刻只允许被一个线程执行.线程要想执行这段代码块的唯一方式是获得监视器. 监视器有两种同步方式:互斥与 ...

  3. Displaying XML in a Swing JTree

    Overview It seems obvious enough: You have an XML document or fragment. XML is hierarchical. A Swing ...

  4. 使用nginx 压缩

    现在的程序使用单页面应用,因此程序会在一开始就会加载页面JS.如果带宽不够,那么会影响页面下载速度. 我们可以使用NGINX 进行压缩,加快文件下载. gzip on; gzip_min_length ...

  5. 再用RNN神经网络架构设计生成式语言模型

    上一篇:<用谷歌经典ML方法方法来设计生成式人工智能语言模型> 序言:市场上所谓的开源大语言模型并不完全开源,通常只提供权重和少量工具,而架构.训练数据集.训练方法及代码等关键内容并未公开 ...

  6. ORCA避障源码笔记

    参考资料 https://gamma.cs.unc.edu/ORCA/publications/ORCA.pdf https://gamma.cs.unc.edu/RVO2/ 数学知识 1.向量的点乘 ...

  7. 【C++】static 知识整理 【静态与局部静态】

    目录 类外 类内 局部静态 local static 类外 类内 类外 C++的静态可以分为两种情况来讨论:在类外和在类内. 对于静态变量/函数,链接将只在内部 (如果不用static,那么在不同文件 ...

  8. FineReport取消强制分页和调整宽度的设置方法

    在decision里,找到管理系统-目录管理,打开相应挂载的报表,在参数设置里,添加以下内容: _bypagesize_ 字符串 false

  9. 鸿蒙应用开发从入门到入行 - 篇1:HarmonyOS介绍——带你深入理解鸿蒙特性

    鸿蒙应用开发从入门到入行 第一天 - HarmonyOS介绍 导读:在本篇文章里,您将了解到HarmonyOS是什么,以及有哪些振奋人心的特性.并且猫林老师会在本篇文章里给出结论:鸿蒙必能蚕食安卓份额 ...

  10. NATS: 对依赖注入支持

    NuGet: NATS.Net 使用方法: serviceCollection.AddNats(); 在容器中添加了 2 个单例服务: NATS.Client.Core.NatsConnection ...