css3 :nth-child()选择器的使用 一、nth-child() 1. nth-child(n):父元素下的第n个子元素,n>0,索引从1开始。不区分子元素类型。 2. nth-child(odd):父元素下的奇数子元素,等同于:nth-child(2n-1)。区分子元素类型。 3. ntn-child(even):父元素下的偶数子元素,等同于:nth-child(2n)。区分子元...
1.first-child 选择列表中的第一个标签 li:first-child{color:red} 2. last-child 选择列表中的最后一个标签 li:last-child{color:pink} 3.nth-child(n) 这里的n为数字,表示选择列表中的第n个标签 例如选择第三个标签 li:nth-child(3){color:pink} 4.nth-child(2n) 选择列表中的偶数,选中 2、4、6...
:nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于:nth-child和:nth-of-type这两个属性自己用的并不多,对这两个属性的认识就像是一团浆糊。印象在使用:last-child这个类似选择器的时候,出现了没有效果的情况,现在想想,就是因为对选择器的理解不够透彻,所以使用的时候出问题的...
第1个到第5个li:nth-child(-n+5) 第6个到最后li:nth-child(n+6) 最后1个li:last-child 倒数第二个li:nth-last-child(2) 奇数个li:nth-child(odd)或li:nth-child(2n+1) 偶数个li:nth-child(even)或li:nth-child(2n) 兼容性 IE9+,Firefox,Chrome。 让IE6+支持:nth-child方法是,可以用selecti...
nth-child和nth-of-type是css的两个伪选择符。应用中,这两者常常容易混淆。这里把它们拿出来仔细做个对比,看看这两者是怎么查找元素的。 nth-child(n) —— 寻找第n个子元素 nth-of-type(n) —— 寻找同一类型元素里的第n个元素 看这个定义也许还不是很清楚他们的区别,我们一点点来区分。
一、:nth-child()和:nth-of-type()的支持度 所有主流浏览器均支持:nth-child()和:nth-of-type()选择器,除了 IE8 及更早的版本。 二、:nth-child()和:nth-of-type()的一般使用方法 1、:nth-child(x); 选择第x的元素 2、:nth-child(x*n) x的n倍元素 ...
使用:nth-last-child()选择器: 代码语言:css 复制 li:nth-last-child(-n+2){/* 在此处添加您的样式 */} 这将选择列表中的最后2项,并应用您指定的样式。 使用:nth-last-of-type()选择器: 代码语言:css 复制 li:nth-last-of-type(-n+2){/* 在此处添加您的样式 */} ...
nth-child是一个伪类,它为选择器添加条件,并允许您将样式应用于子元素的第n个(nth)。 当你想要交替设置背景颜色以便在包含许多项目的表格中轻松查看时,nth-child就变得非常有用。 下面我们就来看nth-child的使用方法 nth-child的描述如下 元素:nth-child(值){样式的内容} ...
1 新建一个html文件，命名为test.html，用于讲解jquery中:nth-child选择器如何使用。 2 在test.html文件内，在div标签内，使用p标签创建多行内容。 3 在test.html文件内，使用button标签创建一个按钮，给button按钮绑定onclick点击事件，当按钮被点击时，执行getNr()函数。 4 在js标签中，创建...