CSS选择器:nth-child()

CSS3 :nth-child() 选择器

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。

n 可以是数字、关键词或公式。


Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)。


使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。 

选择第N个元素  :nth-child(n)

/*选择第5个*/
li:nth-child(5){background:#ccc;}

选择奇数 :nth-child(odd)  或  :nth-child(2n+1) 

li:nth-child(odd){background:#ccc;}
li:nth-child(2n+1){background:#ccc;}

选择偶数 :nth-child(even)  或  :nth-child(2n) 或者  :nth-child(2n+2) 

li:nth-child(even){background:#ccc;}
li:nth-child(2n){background:#ccc;}
li:nth-child(2n+2){background:#ccc;}

使用公式  :nth-child(an + b)  、 :nth-child(an - b)

a代表一个循环的大小,N是一个计数器(从0开始),以及b是偏移量(+从开始向后偏移、 -从最后向前偏移)。

/*每3个分为一组,选择3的倍数中的第1个*/
li:nth-child(3n+1){background:#ccc;}

/*每3个分为一组,选择3个倍数的前一个即 3-1 6-1 9-1*/
li:nth-child(3n-1){background:#ccc;}

公式拓展:范围(从前向后)  :nth-child(n+b)  b为开始位置

/*从第3位开始到结束所有*/
li:nth-child(n+3){background:#ccc;}

公式拓展:范围(从后向前)nth-child(-n+b)  b为开始位置

/*第6位(包括6)前所有位置*/
li:nth-child(-n+6){background:#ccc;}

公式拓展:范围(区间)li:nth-child(n+b):nth-child(-n+b)  b为开始vs结束位置

/*从第4位开始到第8位区间*/
li:nth-child(n+4):nth-child(-n+8){background:#ccc;}

 公式拓展:更多组合 li:nth-child(n+b):nth-child(n):nth-child(-n+b) 

/*从第2位到第9位的奇数位置*/
li:nth-child(n+2):nth-child(odd):nth-child(-n+9){background:#ccc;}

  

/*
li:nth-child(8n) 8个位一组循环
li:nth-child(n+7):nth-child(8n-1) 从第7个开始 每8个为一组循环向前偏移1*/
li:nth-child(8n),li:nth-child(n+7):nth-child(8n-1){border-bottom:1px dashed #000;margin-bottom:10px;padding-bottom:10px;}

CSS 选择器参考手册

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/867122.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Nginx-http_limit_req_module模块

文章目录 前言一、ngx_http_limit_req_module模块二、指令1.limit_req_zone2.limit_req3.limit_req_log_level4.limit_req_status 实验burst取默认0的情况burst不取默认值 总结 前言 如何限制每个客户端每秒处理请求数 一、ngx_http_limit_req_module模块 生效阶段&#xff1…

间接平差——以水准网平差为例 (matlab详细过程版)

目录 一、原理概述二、案例分析三、代码实现四、结果展示本文由CSDN点云侠原创,间接平差——以水准网平差为例 (matlab详细过程版),爬虫自重。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫与GPT生成的文章。 一、原理概述 间接平差的函数模型和随机模型…

加盖骑缝章软件、可以给PDF软件加盖自己的骑缝章

加盖骑缝章的软件多种多样,尤其是针对PDF文件,有多种软件可以实现给PDF文件加盖自己的骑缝章。以下是一些常用的软件及其特点: 1. Adobe Acrobat Pro DC 特点: 多功能PDF编辑:Adobe Acrobat Pro DC是一款功能强大的…

加入运动健康数据开放平台,共赢鸿蒙未来

HarmonyOS SDK运动健康服务(Health Service Kit)是为华为生态应用打造的基于华为帐号和用户授权的运动健康数据开放平台。在获取用户授权后,开发者可以使用运动健康服务提供的开放能力获取运动健康数据,基于多种类型数据构建运动健…

【Qwen2部署实战】Ollama上的Qwen2-7B:一键部署大型语言模型指南

系列篇章💥 No.文章1【Qwen部署实战】探索Qwen-7B-Chat:阿里云大型语言模型的对话实践2【Qwen2部署实战】Qwen2初体验:用Transformers打造智能聊天机器人3【Qwen2部署实战】探索Qwen2-7B:通过FastApi框架实现API的部署与调用4【Q…

Python创建MySQL数据库

一、使用Docker部署本地MySQL数据库 docker run --restartalways -p 3307:3306 --name mysql -e MYSOL_ROOT_PASSWORDlms123456 -d mysql:8.0.25 参数解析: 用户名:root 密码:lms123456 端口:3307 二、在Pycharm开发工具中配置连接MySQL数据库 三、安装zdppy_mysql pip inst…

沉浸式三维园区场景漫游体验

利用图扑三维可视化技术展示园区在不同时间段的变化,提供全景漫游体验,帮助用户全方位感受和理解园区环境,实现智能化管理与优化。

Linux 进程间的信号

1.信号的初认识 信号是进程之间事件异步通知的一种方式,属于软中断。通俗来说信号就是让用户或进程给其他用户和进程发生异步信息的一种方式。对于信号我们可以根据实际生活,对他有以下几点认识:1.在没有产生信号时我们就知道产生信号要怎么处…

LLM - 卷积神经网络(CNN)

1. 卷积神经网络结构:分为输入层,卷积层,池化层,全连接层; (1)首先进入输入层,对数据数据进行处理,将输入数据向量化处理,最终形成输入矩阵。 (…

电脑录歌用什么软件好?分享电脑录音软件:6款

短视频普遍的今天,越来越多的人喜欢通过电脑进行音乐创作和录制。然而,面对市面上琳琅满目的电脑录音软件,很多人可能会感到困惑:电脑录歌用什么软件好呢?本文将为大家分享六款精选的录音软件,帮助大家找到…

校园电动车安全监控和调度系统-计算机毕业设计源码13028

摘要 校园电动车安全监控和调度系统是为了确保校园内电动车的安全和高效运行而设计的。该系统通过安装在电动车上的监控设备,实时监测电动车的运行状态,包括速度、位置、电池电量等,一旦发现异常情况,系统会立即发出警报并通知相关…

【matlab】分类回归——智能优化算法优化径向基神经网络

径向基(Radial Basis Function, RBF)神经网络 一、基本概念 径向基函数(RBF):是一个取值仅仅依赖于离原点(或某一中心点)距离的实值函数。在RBF神经网络中,最常用的径向基函数是高…

使用patch-package自动修改node_modules中的内容/打补丁

背景 在使用VuePress搭建个人博客的过程中,我需要使用到一个用来复制代码块的插件uepress-plugin-nuggets-style-copy。 问题:插件可以正常安装,但是启动会报错。通过查看错误信息,定位是插件中的copy.vue文件出现错误&#xff0c…

将循环转化为递归的三种方法,求1+2+3……+n等差数列

解法一&#xff1a;使用公共变量s&#xff0c;递归循环1~n加到s上 #include<bits/stdc.h> using namespace std; int n,s; void fun(int i){if(i<n){ssi;fun(i1);}}int main(){cin>>n;fun(1);cout<<s;return 0; } 解法二&#xff1a;通过层层累加&#x…

C语言自定义类型——联合体、枚举

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、联合体&#xff08;一&#xff09;、联合体的声明&#xff08;二&#xff09;、联合体的特点&#xff08;三&#xff09;、联合体大小的计算&#xff01;&a…

二维树状数组区域查询

落谷4514 过关代码如下 #define _CRT_SECURE_NO_WARNINGS #include<bits/stdc.h> using namespace std; //#define int long longconst int N 2050; int t1[N][N], t2[N][N], t3[N][N], t4[N][N]; int lowbit(int x) { return x & (-x); } int n, m; void update(…

Mybatis实现RBAC权限模型查询

RBAC权限模型 Role-Based Access Control&#xff0c;中文意思是&#xff1a;基于角色&#xff08;Role&#xff09;的访问控制。这是一种广泛应用于计算机系统和网络安全领域的访问控制模型。 简单来说&#xff0c;就是通过将权限分配给➡角色&#xff0c;再将角色分配给➡用…

应急响应-网站入侵篡改指南Webshell内存马查杀漏洞排查时间分析

查看146天的内存马 方法&#xff1a; 1. 日志 这种地址一般在扫描 还要注意post传参注入 对其进行全局定位 发现有sql注入 我们可以也尝试去sqlmap注入 如果以这种方式注入ua头就会改变 2. 了解自己的中间件&#xff0c;框架&#xff0c;cve&#xff0c;等 因为不知道时间…

Unity中TimeLine的一些用法

Unity中TimeLine的一些用法 概念其他 概念 无Track模式&#xff08;PlayableAsset、PlayableBehaviour&#xff09; 1. 两者关系 运行在PlayableTrack中作用 PlayableBehaviour 实际执行的脚本字段并不会显示在timeline面板上 PlayableAsset PlayableBehaviour的包装器&#x…

[AI Perplexica] 安装指南:轻松部署AI驱动的开源搜索引擎

[AI Perplexica] AI驱动的开源搜索引擎[AI Perplexica] 深入解析&#xff0c;AI 架构揭秘 之前&#xff0c;我们看过了 Perplexica 的介绍&#xff0c;特点和架构&#xff0c;了解了其工作原理。 今天&#xff0c;我们一起来部署下 安装 docker 安装 docker https://docs.…