小编给大家分享一下css伪类之nth-child()有什么用,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
在CSS3中nth-child()伪类对于在HTML中创建格式化的Excel样式表非常有用。也用于生成网格布局而不必求助于表格。
首先我们来了解一下nth-child()伪类的相关知识。
我们使用的语法是,:nth-child (n + b)其中一个是频率,b是初始偏移量。这生成了一个从n=0开始的无限级数,但只包含正值。
一些例子可能会使这更清楚:
<强> 2 n, 2 n + 0
,,2,4,6,8,10,12……
<强> 2 n + 1或奇数
,,1,3,5,7,9,11……
<强> 2 n + 2
,,2,4,6,8,10,12……
<强> 2 n + 3
,,3,5,7,9,11,12……
<强> 2 n + 4
,,4、6、8、10、12、14……
<强> 3 n, 3 n + 0或3 n + 3
,,3、6、9、12、15、18……
<>强3 n + 1
,,1、4、7、10、13、16…
因此,你可以看到系列从b开始,然后为每个值增加。跳过任何零或负的结果意味着我们不能在DOM树中向后看。
接下来我们通过示例来看看nth-child()伪类的作用:
<强>示例一:和悬停一起连用
这个例子使用了nth-child伪类和~一般兄弟选择器。
首先,我们通过简单地向左侧浮动多个div容器并使用nth-child在每十个框之后开始一个新行来创建网格:
在HTML中,我们为每个div容器(# div1, # div2,…,# div100)添加了一个id,然后分配了一个悬停事件,如下所示:
这意味着当光标在某个div上时,这个div的每个第n个兄弟都将变为黄色。例,当鼠标悬停在数字3 (# div3)上时,它会变为红色,而每个3的倍数的div变为黄色。试试吧,我们来看看效果:
。格子tr: nth-child(奇数){
背景:rgba (0.5 0 0255);
}
道明:.tartan nth-child(甚至){
背景:rgba (255, 0, 0, 0.5);
}
如果要直接定位相交的单元格,以便不需要透明背景也能够指定其他颜色,我们还可以使用:
这里针对的是表格所有奇数行的奇数单元格和偶数行的偶数单元格,我们看看效果:
看完了这篇文章,相信你对css伪类之nth-child()有什么用有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
