`
shizisongsong
  • 浏览: 39515 次
文章分类
社区版块
存档分类
最新评论

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

阅读更多

CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻叹。虽 然如此,但有前瞻性的我们,又怎能停步不前呢?今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”

语法:

:nth-child(an+b)

为什么选择她,因为我认为,这个选择器是最多学问的一个了。很可惜,据我所测,目前能较好地支持她的只有Opera9+和Safari3+。可以500%提高开发效率的前端UI框架!

描述:

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

第三种:倍数分组匹配

:nth-child(an+b) 与 :nth-child(an-b)

先对元素进行分组,每组有a个,b为组内成员的序号,其中字母n和加号+不可缺省,位置不可调换,这是该写法的标志,其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号,此时匹配组内的第a-b个。(其实an前面也可以是负号,但留给下一部分讲。)可以500%提高开发效率的前端UI框架!

例子:

li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/

li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/

li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/

li:nth-child(3n±0){background:orange;}/*相当于(3n)*/

li:nth-child(±0n+3){background:orange;}/*相当于(3)*/

第四种:反向倍数分组匹配

:nth-child(-an+b)

此处一负一正,均不可缺省,否则无意义。这时与:nth-child(an+1)相似,都是匹配第1个,但不同的是它是倒着算的,从第b个开始往回算,所以它所匹配的最多也不会超过b个。

例子:

li:nth-child(-3n+8){background:orange;}/*匹配第8、第5和第2个LI*/

li:nth-child(-1n+8){background:orange;}/*或(-n+8),匹配前8个(包括第8个)LI,这个较为实用点,用来限定前面N个匹配常会用到*/可以500%提高开发效率的前端UI框架!

第五种:奇偶匹配

:nth-child(odd) 与 :nth-child(even)

分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。

0
0
分享到:
评论

相关推荐

    详解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+和...

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

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

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

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

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

    CSS3的:nth-child()伪类选择器是一种强大的样式选择工具,允许开发者更加精确地选取页面中的元素,尤其在处理列表或其他具有多个同级元素的场景下。它基于元素的兄弟关系和它们在父元素中的相对位置来应用样式,极大...

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

    在CSS(层叠样式表)中,`:nth-child(n)`是一个强大的选择器,它允许我们精确地选择和操作页面上的特定子元素。这个选择器基于元素在父元素中的相对位置来匹配元素,而不是基于它们的名称、类或者ID。这意味着无论...

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

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

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

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

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

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

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

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

    选择器(css3/css2)

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

    使用HTML开发商业网站-结构化伪类选择器课件.pptx

    接下来,我们将逐一解析文中提到的几种结构化伪类选择器,并详细介绍其应用场景和实际操作方法。 ### 1. :root 选择器 `:root` 选择器用于匹配文档的根元素。在HTML文档中,根元素始终是 `<html>` 元素。这意味着...

    CSS-nth-child

    CSS-nth-child选择器是CSS中的一种强大的伪类选择器,用于选取具有特定索引位置的子元素。这个选择器允许开发者基于元素在父元素中的相对位置来应用样式,而不仅仅依赖于元素的类型或类名。这在创建动态布局、响应式...

Global site tag (gtag.js) - Google Analytics