结构伪类

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

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

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

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

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

依次选中第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. 关于linux 终端的小命令

    Ubuntu 为例 ctrl alt t   新开一个终端(默认工作目录) ctrl shift t 在当前终端开一个tab (工作目录和当前tab一致 当你进入一个很深的目录的时候需要新开一个命令行 ...

  2. 我的neovim配置

    init.vim " Vim with all enhancements "文件管理器,我想试一下ranger syntax enable syntax on let maplea ...

  3. Tornado框架之应用安全（四）

    知识点 Cookie操作 安全Cookie 跨站请求伪造原理 XSRF保护 模板 请求体 HTTP报文头 用户验证 authenticated装饰器 get_current_user()方法 logi ...

  4. Java日志手机号脱敏工具类

    背景 在开发过程中,很容易将用户敏感信息,例如手机号码.身份证等,打印在日志平台.为了保护用户数据,又不影响日志的打印,需要将日志中的敏感信息进行脱敏. 效果 没看明白,强烈建议 pull项目,执行一 ...

  5. spring gateway 学习

    为什么需要使用网关 1.实现统一认证 2.统一一个域名,解决调用困难. 3.协议转换 将不友好的协议转成友好的协议. spring cloud gateway 是什么 是spring cloud 的第 ...

  6. 《前端运维》二、Nginx--2请求处理流程及核心模块

    前一篇内容,我们学习了nginx的一些基本概念.安装和目录的作用.这篇文章我们来学习一些更加深入的内容. 一.Nginx请求处理流程 我们先来看张图吧: 我们看上图,首先客户端请求到Nginx服务器, ...

  7. Datadog发布云成本现状报告：83%的容器支出被闲置资源浪费

    原文链接:https://www.datadoghq.com/state-of-cloud-costs/ 编译:CloudPilot AI 尽管灵活多样的云服务为云成本优化提供了诸多机会,但企业在提升 ...

  8. 腾讯云 TStor 私有云存储获统信+海光/兆芯官方认证

    腾讯云 TStor 是一款分布式存储产品,致力于解决私有云.混合云下的各类存储需求.产品紧跟国内信创生态,持续加强自主可控能力.目前,TStor 已经支持国内主流国产操作系统和硬件,如中标麒麟操作系统 ...

  9. Flutter Package: flutter_animate

    Flutter package: flutter_animate A performant library that makes it simple to add almost any kind of ...

  10. Dapr-2: 世界是分布式的

    第 2 章 世界是分布的 只需要问任何达人:现代的.分布式的系统已经到来,单体应用已经过时. 但是,不仅是达人,渐进的 IT 领袖,企业架构师,以及精明的开发者,在探寻和评估现代分布式应用的时候,也在 ...