语法:
:nth-child(an+b)
描述:
伪类:nth-child()的参数是an+b,如果按照w3.org上的描述,写成中文, 很可能会让人头晕,再加上笔者的文笔水平有限,所以我决定避开an+b的说法,把它拆分成5种写法共5部分来说明。
第一种:简单数字序号写法
:nth-child(number)
直接匹配第number个元素。参数number必须为大于0的整数。
例子:
li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/
第二种:倍数写法
:nth-child(an)
匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。
例子:
li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/
分享到:
相关推荐
我是第1个p标签 我是第2个p标签</p> <!-- 希望这个变红 --> 然后两个选择器相对应的CSS代码如下: ...p:nth-child(2) { color: red;...对于:nth-child选择器,在简单白话文中,意味着选择一个元素:
今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的一个了。很可惜,据我所测,目前能较好地支持她的只有Opera9+和Safari...
今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的一个了。很可惜,据我所测,目前能较好地支持她的只有Opera9+和...
本文实例讲述了jQuery中:nth-child选择器用法。分享给大家供大家参考。具体分析如下: 此选择器匹配其父元素下的第N个子或奇偶元素。 :eq(index)选择器只匹配一个元素,而:nth-child选择器将为每一个父元素匹配子...
总之,理解并熟练运用`:nth-child()`和`:nth-of-type()`选择器对于编写高效且精确的CSS至关重要。在设计网页布局和交互时,根据实际需求选择合适的选择器,能够提高代码的可读性和维护性。同时,考虑到浏览器兼容性...
本篇文章将深入探讨如何解决IE8下CSS3选择器`nth-child()`不兼容的问题,并介绍一些相关的CSS选择器。 `nth-child()`选择器是CSS3引入的一个强大工具,允许我们根据元素在同级元素中的位置来应用样式。例如,`nth-...
在CSS3中,`:nth-child` 和 `:nth-of-type` 都是用于选择具有特定索引位置的元素,但它们之间存在着微妙的区别,这些差异往往会在复杂的布局和选择器应用中体现出来。深入理解这两个伪类对于创建精确、动态的CSS样式...
同时,`:nth-child(n)`还可以与其他CSS选择器一起使用,如类选择器 `.class` 或 ID 选择器 `#id`,以增加选择器的特异性,使得样式规则更精确地匹配目标元素。 总的来说,`:nth-child(n)`是CSS中一个强大的工具,它...
对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选择器:nth-child() 简单的归纳下nth-child()的几种用法。 第一:nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。(EG) li:nth...
CSS3伪类选择器 E:root 根选择器,它的意思是匹配元素E所在文档的根元素,在HTML文档中,根元素始终是 E:not 否定选择器,它和JQuery中的:not选择器一模一样,可以选择除某个元素以外的元素, E:first-child 第...
这类选择器包括但不限于 `:first-child`、`:last-child`、`:nth-child()`、`:nth-last-child()`、`:nth-of-type()` 和 `:nth-last-of-type()` 等。 #### 三、具体选择器详解 ##### 1\. `:first-child` `:first-...
一、X:nth-child(n) ...demo的用法是最简单的,X:nth-child()更强大的用处在于奇偶匹配,明河不展开讲,有兴趣的请看《Understanding :nth-child Pseudo-class Expressions》,《CSS3 :nth-child()伪类选择器》 二、X
HTML5和CSS3是现代网页制作的核心技术,其中CSS3的结构化伪类选择器是增强网页样式控制的重要工具。这些选择器允许开发者更精确地定位和应用样式,提高页面设计的灵活性和可维护性。 首先,`:root`选择器用于选取...