css的nth选择器,CSS选择器之nth
语法:E:nth-child(n){}
说明:nth-child() 是CSS3的一个伪类选择器,匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。
效果实例:
一、数字序号写法 E:nth-child(5){} //数值
1
2
3
4
5
6
7
8
9
E表示标签,div, li, span等,下同。
注意:数字的序号是从1开始的哦,不像很多编程语言中索引是0开始的,参数是必须大于0的整数。
1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9
二、关键字写法 E:nth-child(even){} //偶数
1
2
3
4
5
6
7
8
9 E:nth-child(odd){} //奇数
1
2
3
4
5
6
7
8
9
关键字写法中,只有 even 和 odd 两种,匹配序号为偶数与奇数的元素。
三、倍数写法: E:nth-child(2n){} //2倍
1
2
3
4
5
6
7
8
9 E:nth-child(3n){} //3倍
1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9
3n 4n 5n
n是固定要写的,n从0开始遍历,直到找到所有匹配元素,n前加数值,加2就是2倍,可以任意的,1n, 2n, 3n, 4n, 5n... 依次类推。一般用到的就2n、3n比较多,再大也没什么意义了。
四、倍数分组写法:
倍数可以视为一组,比如3n,可以理解为3个li为一组,然后相加相减都是在这一组里面筛选的,相加、相减的值都是正整数的。n和+号或n和-号是必须写的。 E:nth-child(2n+1){} //倍数分组+值
1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9
2n+1 2n+2 2n+3
1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9
3n+1 3n+2 3n+3
1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9
4n+1 4n+2 4n+3
这种写法简单理解就是“隔几取几”,比如 3n+1 表示“隔二取一”,其余类推。 E:nth-child(2n-1){} //倍数分组-值
1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9
2n-1 2n-2 3n-2
1
2
3
4
5
6
7
8
9
10
11
12 1
2
3
4
5
6
7
8
9
10
11
12 1
2
3
4
5
6
7
8
9
10
11
12
3n-1 4n-1 4n-2
五、反向倍数分组写法: E:nth-child(-n+2){} //倍数负值
1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9 1
2
3
4
5
6
7
8
9
-n+2 -n+3 -n+4
反向倍数是从最后一个开始往回算的。可以选取序号小于某个值的元素,比如 -n+2 可以选取前2个元素。
其他一些效果: E:nth-child(n+3){} //选取序号大于3的元素 也就是除前2个元素外的元素
1
2
3
4
5
6
7
8
9
能有这篇文章,是因为聪聪问了我个问题,li隔行怎么弄,想了半天才想到将li6个一组,每组里面再减去相应的,试了下还真的可以,效果如下: li:nth-child(6n-5),li:nth-child(6n-4),li:nth-child(6n-3){}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
通过上面的效果实例,可以发现不同写法出来的效果有些是一样的,比如:
E:nth-child(2n){}和E:nth-child(even){}一样,
E:nth-child(2n+1){}和E:nth-child(odd){}一样。
兼容方面,现代浏览器完全没问题,但IE浏览器仅支持IE9及以上哦,要想在低版本上使用,另外想办法吧,臣妾做不到呀o(>﹏
总结:nth-child选择的是子元素,如果只想选择同类的子元素,那应该使用nth-of-type选择器。nth-child 的同类选择器还有first-child、last-child、only-child、nth-last-child
本文地址:http://blog.mingsixue.com/it/CSS-selector-nth-child.html 文章若需转载,请附上原文链接,谢谢配合。^_^
css的nth选择器,CSS选择器之nth相关推荐
- CSS伪类选择器nth-child 选择3的倍数个元素写法
CSS伪类选择器nth-child 选择3的倍数个元素写法 web开发中,经常有对列表的3倍数列表项单独设置样式的需求. ul li:nth-child(3n+3) { colo ...
- 使用css伪类选择器,css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字 实例 说明 :link a:link 选择所 ...
- 基础html交代选择器,html 选择器之基础选择器
我把CSS选择器分开成三部分,第一部分是我们常用的部分,我把他叫做基本选择器:第二部分我把他称作是属性选择器,第三部分我把他称作伪类选择器 一.基础选择器 1. 通配符(*):选中所有的元素 2.元素 ...
- html 中加号的表示方法,CSS的+(加号)选择器怎么用
在CSS中"+"符号选择器用于选择紧跟在指定元素之后但不在特定元素内部的元素.下面本篇文章就来具体介绍一下,希望对大家有所帮助. "+"符号选择器 在CSS中& ...
- html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类)...
一.标签选择器 Document h1 { color: red; } h2{ color: green; } Hello World! Hello World! Hello ! Hello ! 二. ...
- HTML相玲选择器,CSS 相邻元素选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...
- CSS入门基础(样式,css文件,选择器)
CSS入门学习 CSS的简介 基本语法结构 基本用法 给元素添加样式 行内样式 内部样式 外部样式 定义样式css文件 在html中引入css文档 选择器 标签选择 类选择 id选择 CSS的简介 层 ...
- html四种选择器的特点,css四种选择器总结
css 在网页开发中扮演着重要的角色,被誉为网页开发的三剑客,如果说html是人的外在器官部分,那css无疑是各个器官组成在一起然后表现出来,css又称样式重叠在网页排版布局中的地位举足轻重. 做为后 ...
- html中css的逗号用法,css样式多个类、标签用【逗号 空格 冒号 点】分开的解析...
ReactNative学习之css样式使用 前言: 前面学习了html,今天学习一下css的基本使用,看下html与css之间是如何结合来编写前端网页的. CSS 是什么? CSS 是 Cascadi ...
- 基础选择器之通配符选择器(CSS、HTML)
基础选择器之通配符选择器(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta c ...
最新文章
- 使用VM虚拟机的一点小技巧
- python函数绘制5个太阳花_python_bomb----函数
- Android开发究竟该如何学习,附架构师必备技术详解
- 34.2. terminal
- VS2022 C28251 WinMain批注不一致的解决方法
- Flex不支持SOAP1.2
- dsp广告和信息流广告区别_信息流广告和sem广告有哪些区别2021?
- fat linux 链接,FAT格式磁盘镜像制作方法
- 基于R语言的贝叶斯网络模型、现代贝叶斯统计学方法
- MySQL误删数据找回和恢复
- iOS开发者必备: 五大编程类工具
- 用excel将有规律的数据随机打乱
- AutoIt:常用文件操作
- 技术工坊|腾讯华为入局的区块链BaaS平台解决了什么问题?(上海)
- 无法定位程序输入点于动态链接库
- HTML+CSS期末大作业:电影网站设计——猫眼电影(9页)
- 分布式学习(7)etcd@3@ API v3 gRPC_事务,租约
- [DIY]如何制作一款个性的收音机
- 关于 Windows 7 语言包
- 实现摄像头在内网、外网、gb28181 实现 “视频监控/直播” 的常用几种方式
热门文章
- 相机技术--摄像机720p、1080p、2mp、3mp、5mp;VGA, QHD, FHD, 2K,4K对应的分辨率分别是什么
- SpringBoot exclude的使用
- 面试官:我们来聊一聊Redis吧,你了解多少就答多少
- Mysql通过ibd文件恢复数据的步骤详解
- C#毕业设计——基于C#+asp.net+ACCESS的电子商务网站设计与实现(毕业论文+程序源码)——电子商务网站
- Git基础-生成SSH密钥+配置密钥到远程仓库中
- Spring注解汇总
- 操作系统4.1.8 文件保护
- 怎么能防止网站被注入eval(base64_decode这种类型的木马?
- 郑职院官计算机网络,2020年陕西省青年职业技能大赛计算机网络管理员决赛开幕式在汉中职院举行...