`

CSS3伪类选择器:nth-child()

    博客分类:
  • css3
 
阅读更多

语法:

 

: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的背景设为橙色*/

原文:http://duanxin.me/articles/discuss-css3-selector-nth-child/

分享到:
评论

相关推荐

    详解CSS3选择器:nth-child和:nth-of-type之间的差异

    我是第1个p标签 我是第2个p标签</p> <!-- 希望这个变红 --> 然后两个选择器相对应的CSS代码如下: ...p:nth-child(2) { color: red;...对于:nth-child选择器,在简单白话文中,意味着选择一个元素:

    CSS3 伪类选择器 nth-child()说明

    今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的一个了。很可惜,据我所测,目前能较好地支持她的只有Opera9+和Safari...

    CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式

    今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的一个了。很可惜,据我所测,目前能较好地支持她的只有Opera9+和...

    jQuery中:nth-child选择器用法实例

    本文实例讲述了jQuery中:nth-child选择器用法。分享给大家供大家参考。具体分析如下: 此选择器匹配其父元素下的第N个子或奇偶元素。 :eq(index)选择器只匹配一个元素,而:nth-child选择器将为每一个父元素匹配子...

    css :nth-child与:nth-of-type之小解

    总之,理解并熟练运用`:nth-child()`和`:nth-of-type()`选择器对于编写高效且精确的CSS至关重要。在设计网页布局和交互时,根据实际需求选择合适的选择器,能够提高代码的可读性和维护性。同时,考虑到浏览器兼容性...

    IE8下CSS3选择器nth-child() 不兼容问题的解决方法

    本篇文章将深入探讨如何解决IE8下CSS3选择器`nth-child()`不兼容的问题,并介绍一些相关的CSS选择器。 `nth-child()`选择器是CSS3引入的一个强大工具,允许我们根据元素在同级元素中的位置来应用样式。例如,`nth-...

    CSS3中:nth-child和:nth-of-type的区别深入理解

    在CSS3中,`:nth-child` 和 `:nth-of-type` 都是用于选择具有特定索引位置的元素,但它们之间存在着微妙的区别,这些差异往往会在复杂的布局和选择器应用中体现出来。深入理解这两个伪类对于创建精确、动态的CSS样式...

    使用css属性:nth-child(n)匹配选择第n个子元素

    同时,`:nth-child(n)`还可以与其他CSS选择器一起使用,如类选择器 `.class` 或 ID 选择器 `#id`,以增加选择器的特异性,使得样式规则更精确地匹配目标元素。 总的来说,`:nth-child(n)`是CSS中一个强大的工具,它...

    jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)

    对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选择器:nth-child() 简单的归纳下nth-child()的几种用法。 第一:nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。(EG) li:nth...

    CSS3伪类选择器;例如:E:root、E:not等等

    CSS3伪类选择器 E:root 根选择器,它的意思是匹配元素E所在文档的根元素,在HTML文档中,根元素始终是 E:not 否定选择器,它和JQuery中的:not选择器一模一样,可以选择除某个元素以外的元素, E:first-child 第...

    选择器(css3/css2)

    这类选择器包括但不限于 `:first-child`、`:last-child`、`:nth-child()`、`:nth-last-child()`、`:nth-of-type()` 和 `:nth-last-of-type()` 等。 #### 三、具体选择器详解 ##### 1\. `:first-child` `:first-...

    CSS3结构性伪类选择器九种写法

    一、X:nth-child(n) ...demo的用法是最简单的,X:nth-child()更强大的用处在于奇偶匹配,明河不展开讲,有兴趣的请看《Understanding :nth-child Pseudo-class Expressions》,《CSS3 :nth-child()伪类选择器》 二、X

    HTML5&CSS3网页制作:结构化伪类选择器.pptx

    HTML5和CSS3是现代网页制作的核心技术,其中CSS3的结构化伪类选择器是增强网页样式控制的重要工具。这些选择器允许开发者更精确地定位和应用样式,提高页面设计的灵活性和可维护性。 首先,`:root`选择器用于选取...

Global site tag (gtag.js) - Google Analytics