关于CSS3中伪类选择器的-E:nth-child(an + b) n 取值范围

最新推荐文章于 2022-04-01 18:45:06 发布
最新推荐文章于 2022-04-01 18:45:06 发布
阅读量1.3k 收藏
点赞数
分类专栏： css3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29548433/article/details/74925908
版权 
nth-child(an + b) 的写法是固定的，不能颠倒，写成nth-child(b + an)无效

当a 为正数时，an + b 的最大值为所有子元素的个数，超过该值n 就停止递增

当a 为负数时， an + b 的最大值，不能小于 1, 小于1 ，n 停止递增

详见：CSS3新增选择器示例-伪类选择器

net_chengsheng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 选择器 nth-child 实现一个范围
海天鹰
07-07 506
CSS 选择器 nth-child 实现一个范围
CSS3中nth-child的选择范围
影月丶3的博客
04-20 580
CSS3中nth-child的选择范围 nth-child()中对子级的选择是基于某父盒子的，看如下代码片段： <style> p { color: purple; } .test { color: skyblue; margin: 10px; } .test:nth-child(2) { color:
:nth-child(an+b)
03-10 226
语法：:nth-child(an+b)为什么选择它，因为我认为，这个选择器是最多学问的一个了。很可惜，据我所测，目前能较好地支持她的只有Opera9+和Safari3+。描述：伪类:nth-child()的参数是an+b，如果按照w3.org上的描述，写成中文，很可能会让人头晕，再加上笔者的文笔水平有限，所以我决定避开an+b的说法，把它拆分成5种写法共5部分来说明。第一种：简单数字序号...
CSS3中:nth-child() 的使用-区间选择
MrQiu的博客
12-30 1733
:nth-child(2n) //选择偶数项 :nth-child(3n) //选择3的倍数项 :nth-child(2n-1) //选择奇数项 :nth-child(n+4) //选择大于 4 的项，直到最后一个 :nth-child(-n+4) //选择小于 4 的项，直到第一个 :nth-child(n+5):nth-child(-n+8) //选择一个区间，第五个到第八个[5,8] 举个栗子：设置第五个到第八个li的高度和其他不同。 li { heigh
CSS3 - :nth-child()选择前几个元素 和 范围选择
乔乔的博客
04-14 6131
/* 选择第n个，n位数字 */ :nth-child(n) 选择列表中的偶数标签 :nth-child(2n) 选择列表中的奇数标签 :nth-child(2n-1) 选择前几个元素 /*【负方向范围】选择第1个到第6个 */ :nth-child(-n+6){} 从第几个开始选择 /*【正方向范围】选择从第6个开始的，直到最后 */ :nth-child(n+6){} 两者结合...
《CSS3》学习笔记大全
04-12
CSS3 新增了一些选择器，如 `:nth-child`、`:nth-of-type` 等。这些选择器可以帮助我们更好地选择元素。 * `:nth-child`：选择第 n 个子元素，取值可以是 `2n` 或 `2n+1`。 * `:nth-of-type`：选择第 n 个同类型...
CSS3知识点归纳
07-26
- **a标签的伪类选择器** - 如`:hover`、`:active`等，用于定义不同状态下的样式。 - **过渡模块（过渡动画效果）** - `transition`: 控制元素从一种样式到另一种样式的过渡效果。 - 示例：`transition: ...
《HTML5+CSS3项目开发案例教程》习题答案.docx
03-30
包括样式表的三种类型（行内样式表、内嵌样式表、链接样式表）、HTML标签的基本结构（开始标签和结束标签）、HTML的全称（Hyper Text Markup Language）以及ID选择器的表示法（#）以及CSS中的伪类选择器`:nth-child...
Jquery 表单取值赋值的一些基本操作
12-11
首先，我们要了解jQuery的选择器系统，它是基于CSS选择器的，但提供了更多的功能和便利。 限定子节点选择器如`$(“mix1[mix2]”)`，它用于选取包含特定子元素的节点。例如，`$(“div[a]”)`会选择包含`<a>`标签的`...
css入门笔记
05-15
2.css选择器 1.选择器的作用 规范页面中那些元素能够使用定义好的样式。 2.选择器详解 1.通用选择器 *{样式} 2.元素选择器 p{样式} 3.类选择器 1. 声明 .class名{样式} 2.引用可以引用多个类名用空格隔开...
css选择器 nth-child
郝啊的博客
08-19 1311
css选择器 nth-child 总述 一：nth-child 1.1 nth-child(n) 父元素下的第n个子元素，n必须大于0，索引都是从1开始。 1.2 nth-child(odd) 父元素下的奇数子元素 等同于 nth-child(2n-1) 1.3 nth-child(even) 父元素下的偶数子元素 同样区分子元素类型 等同于nth-child(2n) 1.4 nth-child(an+b) 公式计算 n可以为0 1.5 first-child
css 透明度的值的范围 0.1---1
u014704496的专栏
01-30 1200
IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。 IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。
:nth-child的用法
非专业前端
11-01 869
1. :nth-child(8) 选中第8个子元素 2 :nth-child(n+6) 选中从第6个开始的子元素
:nth-child选择器
allway2的博客
04-01 1728
:nth-child 概述 :nth-child(an+b)这个CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。示例： 0n+3或简单的3匹配第三个元素。 1n+0或简单的n匹配每个元素。（兼容性提醒：在 Android 浏览器 4.3 以下的版本n和1n的匹配方式不一致。1n和1n+0是一致的，可根据喜好任选其一来使用。） 2...
CSS3 的 伪类选择器:nth-child()
weixin_30871293的博客
07-27 72
CSS3的，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，CSSer们只有望洋轻叹。虽 然如此，但有前瞻性的我们，又怎能停步不前呢？今天我们就来“前瞻”一下CSS3的一个伪类选择器":nth-child...
HTML+CSS3实现PH值范围，完美过渡
thissamba的博客
03-20 368
Color pH Scale 14.0 VERY ALKALINE 13.0 12.0 11.0 10.0 9.0 8.0 7.0 6.0 5.0 ...
:nth-child() | CSS属性参考
初晴
09-19 978
CSS :nth-child()伪类选择器基于索引来匹配父元素中的子元素。 :nth-child()伪类选择器的参数在W3C官方表示为an+b。an+b为一个公式. a,b为常量, n的取值是从0开始的整数。 如果将参数进行拆分，可以分为以下5种情况： 1、提供一个正数作为参数。 你可以为:nth-child()提供一个正数作为参数。它表示要选择父元素中索引为该数值的子元素
css伪类选择器 nth-child( ) 使用
FangYifei的博客
09-19 1371
制作中遇到需求： 点击“更多”按钮展开标签 思路：使用css伪类nth-child（）选择之后元素隐藏。 以下搜集关于nth-child用法： 1、正方向范围 li:nth-child(n+5)      选中第5个及之后的元素 2、负方向范围 li:nth-child(-n+8)     选中第8个及之前的元素 3、前后限制范围 li:nth-child(n+5):nt...
nth-child（n）、nth-child(an+b) 和 nth-of-type(n)
LDLint的博客
09-23 348
****三者都不以索引0为开始，参数均从1开始nth-child（n）【n>=1】,nth-child(an+b)【an+b>=1】,nth-of-type(n)【n>=1】 ****nth-child(an+b）中的n是从0开始的，（当b>0时） → 也就是如果没有b：nth-child(an），n需要从1开始 ****nth-child的开始不跟其他元素选择器相关，而nth-of-type和其他元素选择器无关，例子： <style> /*此时：p:n...
css伪类选择器:nth-child讲解
最新发布
10-16
好的，关于 `:nth-child` 伪类选择器，它可以选择某个元素的父元素下的第 n 个子元素，无论它是什么类型的元素。其中 n 可以是一个具体的数字，也可以是一个公式，如 `2n+1` 表示选择所有奇数位置的子元素。 举个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值