一文搞懂 结构伪类 :nth-child && :nth-of-typ
结构伪类
从使用结构伪类的选择器开始 往上一层父辈开始筛选
从使用结构伪类的选择器开始 往上一层父辈开始筛选
从使用结构伪类的选择器开始 往上一层父辈开始筛选
不是从左往右选择 不是先父辈后筛选子类
从使用结构伪类的选择器开始 往上一层父辈开始筛选
依次选中第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的更多相关文章
- 彻底搞懂CSS伪类选择器：is、not
本文介绍一下Css伪类:is和:not,并解释一下is.not.matches.any之前的关系 :not The :not() CSS pseudo-class represents element ...
- 一文搞懂所有Java集合面试题
Java集合 刚刚经历过秋招,看了大量的面经,顺便将常见的Java集合常考知识点总结了一下,并根据被问到的频率大致做了一个标注.一颗星表示知识点需要了解,被问到的频率不高,面试时起码能说个差不多.两颗 ...
- 一文搞懂Flink Window机制
Windows是处理无线数据流的核心,它将流分割成有限大小的桶(buckets),并在其上执行各种计算. 窗口化的Flink程序的结构通常如下,有分组流(keyed streams)和无分组流(non ...
- 一文搞懂RAM、ROM、SDRAM、DRAM、DDR、flash等存储介质
一文搞懂RAM.ROM.SDRAM.DRAM.DDR.flash等存储介质 存储介质基本分类:ROM和RAM RAM:随机访问存储器(Random Access Memory),易失性.是与CPU直接 ...
- 基础篇|一文搞懂RNN（循环神经网络）
基础篇|一文搞懂RNN(循环神经网络) https://mp.weixin.qq.com/s/va1gmavl2ZESgnM7biORQg 神经网络基础 神经网络可以当做是能够拟合任意函数的黑盒子,只 ...
- Web端即时通讯基础知识补课：一文搞懂跨域的所有问题！
本文原作者: Wizey,作者博客:http://wenshixin.gitee.io,即时通讯网收录时有改动,感谢原作者的无私分享. 1.引言 典型的Web端即时通讯技术应用场景,主要有以下两种形式 ...
- CSS3新增（选择器{属性选择器，结构伪类选择器，伪元素选择器}）
1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ] 选择具有 att 属性的 E 元素 例如:input [ value ...
- 三文搞懂学会Docker容器技术（中）
接着上面一篇:三文搞懂学会Docker容器技术(上) 6,Docker容器 6.1 创建并启动容器 docker run [OPTIONS] IMAGE [COMMAND] [ARG...] --na ...
- 一文搞懂如何使用Node.js进行TCP网络通信
摘要: 网络是通信互联的基础,Node.js提供了net.http.dgram等模块,分别用来实现TCP.HTTP.UDP的通信,本文主要对使用Node.js的TCP通信部份进行实践记录. 本文分享自 ...
- 一文搞懂指标采集利器 Telegraf
作者| 姜闻名 来源|尔达 Erda 公众号 导读:为了让大家更好的了解 MSP 中 APM 系统的设计实现,我们决定编写一个<详聊微服务观测>系列文章,深入 APM 系统的产品.架构 ...
随机推荐
- Codeforces Round 971 (Div. 4) E 题解析
# E题 Klee's SUPER DUPER LARGE Array!!! 题目描述 思路: 对于这道题,首先观察到题目求的是最小可能值,而且数据的范围是1e9范围,所以首先可以考虑的方法就是O(l ...
- 鸿蒙hvigor构建任务依赖与生命周期简介
Hivgor脚本文件 在构建的生命周期中Hvigor使用两个脚本文件来完成插件.任务以及生命周期hook的注册: hvigorconfig.ts:此文件在整个项目中只有根目录下存在一份,不是构建必须的 ...
- 2、oracle数据库基本概念
基本概念 一.数据库启动.监听启动.判断数据库是否可以连接的过程.感知实例的存在 虚拟机ip地址:192.168.56.12 这里需要修改一个地方:就是把本地主机Host-Only的ip地址修改为:1 ...
- 在 ASP.NET Core 中创建 gRPC 客户端和服务器
前言 gRPC 是一种高性能.开源的远程过程调用(RPC)框架,它基于 Protocol Buffers(protobuf)定义服务,并使用 HTTP/2 协议进行通信. 新建项目 新建解决方案Grp ...
- 【Azure 环境】从网络包中分析出TLS加密套件信息
问题描述 在抓取到网络包之后,如何来获取TLS信息呢?比如使用的是是么加密套件呢? 因为在应用层面,获取的错误信息非常简单: An TLS 1.2 connection request was rec ...
- python之常用开发包
1.passlib (https://passlib.readthedocs.io/en/stable/) passlib 目前常见的不可逆加密算法有以下几种: 一次MD5(使用率很高) 将密码与一个 ...
- 初识RPA以及简单的RPA项目——微信群发机器人
一.RPA的认识和理解 RPA(Robotic Process Automation)即是机器人流程自动化,简称RPA,是一种自动化技术,可以帮助组织实现业务流程的自动化执行,提高效率和准确性.按我的 ...
- Taro微信小程序获取Tab页可视区域高度
前情 公司有自己的小程序项目,因公司主要技术栈为react,所以选择了Taro来开发,Taro是京东出品的多端统一开发解决方案,用来开发小程序也相比用原生开发,在开发体验上好很多,而且还能使用成熟的R ...
- Python 潮流周刊#81：在个人电脑上运行 GPT-4 级别的大模型（摘要）
本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...
- 题解：P10704 救赎（Redemption）
数论题,先看数据范围,发现 $n$ 和 $m$ 都非常大,但是 $\sum_{i=1}^{i=n}a_i \le 10^9$. 解以上不等式得不同的 $a_i$ 大约有 $40000$ 个.记有 $c ...