【css】css奇数、偶数、指定数选择器:
文章目录
- 一、简单数字序号写法:nth-child(number)
- 二、倍数写法:nth-child(an)
- 三、倍数分组匹配:nth-child(an+b) 与 :nth-child(an-b)
- 四、反向倍数分组匹配:nth-child(-an+b)
- 五、奇偶匹配:nth-child(odd) 与 :nth-child(even)
:nth-child(n)选择器匹配属于其父元素的第 N 个子元素,不论元素的类型
:nth-of-type(n)匹配同类型中的第n个同级兄弟元素
区别:
nth-child(n) : 匹配父元素中的第 n 个子元素,元素类型没有限制。
nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。
n可以是一个数字,一个关键字,或者一个公式,比如:nth-child(odd) 奇数 ,nth-child(even) 偶数。
nth-child和nth-of-type的不同之处就是查找元素的方式不同。前者是查找兄弟元素中某个绝对位置的元素,后者是查找同类型元素中某个绝对位置的元素。
相同:都是找到元素之后再与前面的选择符进行匹配,这里的匹配方式是一样的。
一、简单数字序号写法:nth-child(number)
:nth-child(number)直接匹配第number个元素。参数number必须为大于0的整数。
/* 把第3个LI的背景设为橙色 */
li:nth-child(3){background:orange;
}
二、倍数写法:nth-child(an)
:nth-child(an)匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。
/* 把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色 */
li:nth-child(3n){background:orange;
}
三、倍数分组匹配:nth-child(an+b) 与 :nth-child(an-b)
:nth-child(an+b) 与 :nth-child(an-b)先对元素进行分组,每组有a个,b为组内成员的序号,其中字母n和加号+不可缺省,位置不可调换,这是该写法的标志,其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号,此时匹配组内的第a-b个。(其实an前面也可以是负号,但留给下一部分讲。)
/* 匹配第1、第4、第7、…、每3个为一组的第1个LI*/
li:nth-child(3n+1){background:orange;
}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI */
li:nth-child(3n+5){background:orange;
}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/
li:nth-child(5n-1){background:orange;
}/*相当于(3n)*/
li:nth-child(3n±0){background:orange;
}/*相当于(3)*/
li:nth-child(±0n+3){background:orange;
}
四、反向倍数分组匹配:nth-child(-an+b)
:nth-child(-an+b)此处一负一正,均不可缺省,否则无意义。这时与:nth-child(an+1)相似,都是匹配第1个,但不同的是它是倒着算的,从第b个开始往回算,所以它所匹配的最多也不会超过b个。
/*匹配第8、第5和第2个LI*/
li:nth-child(-3n+8){background:orange;
}/*或(-n+8),匹配前8个(包括第8个)LI,这个较为实用点,用来限定前面N个匹配常会用到*/
li:nth-child(-1n+8){background:orange;
}
五、奇偶匹配:nth-child(odd) 与 :nth-child(even)
:nth-child(odd) 与 :nth-child(even)分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。
//(偶数行)
.table > tr:nth-child(even) > td {background-color: #ccc;
} //(奇数行)
.table > tr:nth-child(odd) > td {background-color: #ccc;
}
相关文章:
【css】css奇数、偶数、指定数选择器:
文章目录 一、简单数字序号写法:nth-child(number)二、倍数写法:nth-child(an)三、倍数分组匹配:nth-child(anb) 与 :nth-child(an-b)四、反向倍数分组匹配:nth-child(-anb)五、奇偶匹配:nth-child(odd) 与 :nth-child(even) :nth-child(n) 选择器匹配属于其父元素的第 N 个子元…...
三维数据Ply格式介绍与读取
三维数据Ply格式介绍与读取 PLY文件格式是在1990年代中期由斯坦福大学的一组研究人员开发的。它已经发展成为最广泛使用的3D数据文件格式之一。该文件格式有ASCII版本和二进制版本。在需要文件大小和处理效率的情况下,首选二进制版本。ASCII版本使得调试变得非常容易。在这里…...
内存管理方式
内存管理 一、C/C内存分布1、内存空间的介绍2、示例题目3、示例题目图解 二、C语言动态内存管理方式1、代码2、介绍 三、C内存管理方式1、概念2、代码3、代码所代表的意义 四、new和delete操作自定义类型1、代码2、运行结果3、特点 五、operator new与operator delete函数1、概…...
文心一言接入Promptulate,开发复杂LLM应用程序
简介 最近在尝试将文心一言的LLM能力接入Promptulate,故写了一篇博客记录一下,Promptulate 是 Promptulate AI 旗下的大语言模型自动化与应用开发框架,旨在帮助开发者通过更小的成本构建行业级的大模型应用,其包含了LLM领域应用层…...
TDengine函数大全-聚合函数
以下内容来自 TDengine 官方文档 及 GitHub 内容 。 以下所有示例基于 TDengine 3.1.0.3 TDengine函数大全 1.数学函数 2.字符串函数 3.转换函数 4.时间和日期函数 5.聚合函数 6.选择函数 7.时序数据库特有函数 8.系统函数 聚合函数 TDengine函数大全APERCENTILEAVGCOUNTELAPS…...
DRM全解析 —— ADD_FB(2)
接前一篇文章:DRM全解析 —— ADD_FB(1) 本文参考以下博文: DRM驱动(四)之ADD_FB 特此致谢! 上一回围绕libdrm与DRM在Linux内核中的接口: DRM_IOCTL_DEF(DRM_IOCTL_MODE_ADDFB, d…...
windows下docker compose方式挂载数据卷volume遇到的问题
例子一,windows 下docker desk top部署TDengine td-compose.yml version: 3 services:tdengine1:image: tdengine/tdengine:latestcontainer_name: tdengine1hostname: tdengine1ports:- 6030:6030- 6041:6041- 6043-6049:6043-6049- 6043-6049:6043-6049/udpresta…...
TCP三次握手四次挥手总结
目录 一、两种传输模式: 二、数据方向: 三、端口的作用: 四、端口类型: 五、三次握手: 六、四次断开 常见面试题 TCP(Transfer control protocol)传输控制协议 一、两种传输模式&#x…...
【0901作业】QTday3 对话框、发布软件、事件处理机制,使用文件相关操作完成记事本的保存功能、处理键盘事件完成圆形的移动
目录 一、思维导图 二、作业 2.1 使用文件相关操作完成记事本的保存功能 2.2 处理键盘事件完成圆形的移动 一、思维导图 二、作业 2.1 使用文件相关操作完成记事本的保存功能 void Widget::on_saveBtn_clicked() {QString filename QFileDialog::getSaveFileName(this,&…...
mysql数据库运行sql:datetime(0) NULL DEFAULT NULL报错【杭州多测师_王sir】
一、错误信息 CREATE TABLE file (id varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT 文件md5,name varchar(128) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,create_time datetime(0) NULL DEFAULT NULL,update_time date…...
手撕二叉平衡树
今天给大家带来的是平衡树的代码实现,如下: #pragma once #include <iostream> #include <map> #include <set> #include <assert.h> #include <math.h> using namespace std; namespace cc {template<class K, clas…...
超图嵌入论文阅读1:对偶机制非均匀超网络嵌入
超图嵌入论文阅读1:对偶机制非均匀超网络嵌入 原文:Nonuniform Hyper-Network Embedding with Dual Mechanism ——TOIS(一区 CCF-A) 背景 超边:每条边可以连接不确定数量的顶点 我们关注超网络的两个属性࿱…...
Qt xml解析之QXmlStreamReader
文章目录 背景QXmlStreamReader简单介绍使用QXmlStreamReader添加头文件<QXmlStreamReader>toString()toInt()完整代码 背景 项目中遇到需要解析某个方法返回的xml字符串,奈何C/C中没有原生的方法可供调用,只能使用第三方库,搜了一圈资…...
Selenium基础 — CSS选择器定位大全
1、css属性定位 css选择器策略示例说明#id#telA选择id"telA"的所有元素。.class.telA选择 class"telA”的所有元素。[属性名属性值][nametelA]除了id和class属性,其他属性的定位格式[attribute][target]选择带有target 属性所有元素。**选择所有元素…...
vue3中keep-alive的使用及结合transition使用
正确用法 在组件中使用(这里结合了 transition 内置动画组件 ) <template><div class"layout clearfix"><router-view v-slot"{ Component, route }"><transition name"fade-transform" mode"…...
【提示工程】询问GPT返回Json结构数据
theme: orange 众所周知,我们可以通过构建的Prompt获取期望的内容,但是通常都是以自然语言返回的,假如我们想得到结构化的数据,比如Json,XML那么怎么办,这篇文章给你一个思路。 理所当然的想法 要实现询问大…...
CSS水平垂直居中方案
1 前言 水平居中、垂直居中是前端面试百问不厌的问题。其实现方案也是多种多样,常叫人头昏眼花。 水平方向可以认为是内联方向,垂直方向认为是块级方向。 2 内联元素的水平垂直居中 首先,常见内联元素有:a、span、em、b、stro…...
SpringBoot入门篇3 - 整合junit、整合mybatis、基于SpringBoot实现ssm整合
目录 1.整合JUnit Spring整合JUnit SpringBoot整合JUnit 测试类注解:SpringBootTest 作用:设置JUnit加载的SpringBoot启动类 2.整合mybatis ①使用spring initializr初始化项目的时候,添加依赖。 ②设置数据源application.yml spring:d…...
C#,《小白学程序》第七课:列表(List)应用之一“编制高铁车次信息表”
1 文本格式 /// <summary> /// 车站信息类 class /// </summary> public class Station { /// <summary> /// 编号 /// </summary> public int Id { get; set; } 0; /// <summary> /// 车站名 /// </summary>…...
周报/月报 Prompt
前言 用 AI 写好一份周报或月报。 文章目录 前言一、目的二、Prompt 设计原则三、模板 一、目的 简单的日程,扩写成一篇高质量的周报; 二、Prompt 设计原则 角色 目标 背景 要求 三、模板 内容生成模板 你是我的周报助手,根据我的工作…...
css实现圆环展示百分比,根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
golang循环变量捕获问题
在 Go 语言中,当在循环中启动协程(goroutine)时,如果在协程闭包中直接引用循环变量,可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下: 问题背景 看这个代码片段: fo…...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣(LeetCode) 思路 使用两个栈:一个存储重复次数,一个存储字符串 遍历输入字符串: 数字处理:遇到数字时,累积计算重复次数左括号处理:保存当前状态&a…...
MMaDA: Multimodal Large Diffusion Language Models
CODE : https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA,它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构…...
Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器
第一章 引言:语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域,文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量,支撑着搜索引擎、推荐系统、…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解(完整版) 一、现代浏览器渲染流程(详细说明) 1. 构建DOM树 浏览器接收到HTML文档后,会逐步解析并构建DOM(Document Object Model)树。具体过程如下: (…...
DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上,看到基于小智 AI DIY 玩具的演示,感觉有点意思,想着自己也来试试。 如果只是想烧录现成的固件,乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外,还提供了基于网页版的 ESP LA…...
嵌入式学习笔记DAY33(网络编程——TCP)
一、网络架构 C/S (client/server 客户端/服务器):由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序,负责提供用户界面和交互逻辑 ,接收用户输入,向服务器发送请求,并展示服务…...
安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖
在Vuzix M400 AR智能眼镜的助力下,卢森堡罗伯特舒曼医院(the Robert Schuman Hospitals, HRS)凭借在无菌制剂生产流程中引入增强现实技术(AR)创新项目,荣获了2024年6月7日由卢森堡医院药剂师协会࿰…...
Vite中定义@软链接
在webpack中可以直接通过符号表示src路径,但是vite中默认不可以。 如何实现: vite中提供了resolve.alias:通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...
