一文搞懂 结构伪类 :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 系统的产品.架构 ...
随机推荐
- 学校官网应该使用哪种SSL证书？
学校官网在选择SSL证书时,应考虑多个因素,包括网站的性质.安全要求.预算以及证书的管理便捷性等.以下是关于学校官网应使用哪种SSL证书的详细分析: 多域名和子域名需求: 如果学校官网有多个子域名或者 ...
- 推荐手绘工具神器Excalidraw素描草图风格白板,支持AI-开源免费
推荐手绘工具神器Excalidraw素描草图风格白板,支持AI-开源免费 原创 IT软件部落 IT软件部落 Excalidraw 一个开源的虚拟手绘风格的白板,是一个很好的素描工具.它真的很容易使用, ...
- （Python基础教程之十一）Python找到最大的N个（前N个）或最小的N个项目
Python基础教程 在SublimeEditor中配置Python环境 Python代码中添加注释 Python中的变量的使用 Python中的数据类型 Python中的关键字 Python字符串操 ...
- Java线程池Executors
一 简述 线程池,作为一个管理一组同构工作线程的资源.接受提交的任务,利用线程池中的线程进行工作的处理. 在另一篇<Java多线程设计模式(4)线程池模式>利用非Executors描述了线 ...
- elementUI中的级联选择器，默认赋值不起作用
今天遇到再使用element的级联选择器功能的时候,是多选,默认赋值不起作用. 后来查到是因为少了multiple属性,但是multiple属性要放在props绑定的对象中,而不是直接放在标签上 &l ...
- Pycharm之使用git merge合并分支
当我们在某个分支上代码开发完成,代码测试没问题后需要把分支上的代码合并到 master 分支上.这样保证 master 分支的代码永远都是最新的,也是最干净的,这样才可以持续的开发自己的项目.本篇讲解 ...
- 基于Github gist的代码片段管理工具Lepton
Lepton主要功能 无限制的公共/私人片段 无限制的标签 语言组 Markdown支持 Jupyter Notebook查看器支持 macOS / Win / Linux客户端 GitHub Ent ...
- 2024年值得推荐的6款 Vue 后台管理系统模板，开源且免费！
前言 在现今的软件开发领域,Vue.js凭借其高效.灵活和易于上手的特性,成为了前端开发的热门选择.对于需要快速搭建企业级后台管理系统的开发者而言,使用现成的Vue后台管理系统模板无疑是一个明智之举. ...
- ZCMU-1120
就这样 #include<cmath> #include<cstdio> #include<iostream> using namespace std; int m ...
- canvas(六)绘制带说明的饼图
1.前言 将以下数据渲染成饼图,数据格式: var data = [ {value:"10",title:"16-22的年龄人数"}, {value:" ...