[CSS3] :nth-child的用法

:nth-child(2)选取第几个标签，“2可以是你想要的数字”

.demo01 li:nth-child(2){background:#090}

:nth-child(n+4)选取大于等于4标签，“n”表示从整数，下同

.demo01 li:nth-child(n+4){background:#090}

:nth-child(-n+4)选取小于等于4标签

.demo01 li:nth-child(-n+4){background:#090}

:nth-child(2n)选取偶数标签，2n也可以是even

.demo01 li:nth-child(2n){background:#090}

:nth-child(2n-1)选取奇数标签，2n-1可以是odd

.demo01 li:nth-child(2n-1){background:#090}

:nth-child(3n+1)自定义选取标签，3n+1表示“隔二取一”

.demo01 li:nth-child(3n+1){background:#090}

:last-child选取最后一个标签

.demo01 li:last-child{background:#090}

:nth-last-child(3)选取倒数第几个标签,3表示选取第3个

.demo01 li:nth-last-child(3){background:#090}

:nth-child的这些用法在实际中很用得着，不用单独给需要选取的标签加上ID或Class

转载于:https://www.cnblogs.com/frost-yen/p/6956055.html

[CSS3] :nth-child的用法相关推荐

css3 nth child 偶数,转载：CSS3 :nth-child(n)方法
:nth-child(n) ---->选中某个元素,该元素必须是某个父元素下的第n个子元素: p:nth-child(n) ---->选中p元素,且该p元素必须是某个父元素下的第 ...
html选择器有哪些child,css3选择器child有哪些？css3选择器child用法详解
本篇文章给大家带来的内容是关于css3选择器child有哪些?css3选择器child用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 对于CSS3的结构伪类选择器,为了更好地 ...
nth:child()选择器
nth:child()属于CSS3中的选择器,针对于有多个相同标签时可以对每个标签的样式进行单独设置,以微信小程序开发中所写的代码为例: 这是wxml中的代码(类似于html): 这是wxss中的代码 ...
CSS3 Flex 弹性布局用法详解
什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性. 说明: 1.flex是display的一个属性值.与之相当应的还 ...
html渐变线条代码,CSS3实现线性渐变用法示例代码详解
前言演示下太老版本浏览器的渐变实现了[IE9-]; IE9以前,渐变都是通过滤镜实现的,大体的写法就是这样; .testDiv { width:400px; height:400px; border ...
CSS3新增选择器及用法详细介绍
目录 CSS属性选择器 E[att^=value]属性选择器 E[att$=value]属性选择器 E[att*=value]属性选择器 CSS3关系选择器 CSS3子代选择器(>) CSS3兄 ...
CSS3 nth 伪类选择器
考察下面的 HTML 代码片段: <div><section>section 1</section><section>section 2</sec ...
css3 中的calc用法
定义与用法 calc() 函数用于动态计算长度值. 1.需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 2.任何长度值都可以使用calc()函数 ...
html边框白色实线rgba,CSS3 RGBA 属性高级用法
这个属性的兼容问题比较简单,IE8已经支持这个属性,IE6和IE7也可以通过hack支持.RGBA和CSS2里的RBG属性差不多,只是RGBA属性多了一个透明度的定义,CSS3标准里对RGBA属性的解 ...
CSS3选择器介绍及用法总结
tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( 'ω' )و CSS3新增了很多强大的选择器它可以让我们少写一些js事件脚本我们先来看看各个版本的选择器有哪些注: ele代表eleme ...

[CSS3] :nth-child的用法

:nth-child(2)选取第几个标签，“2可以是你想要的数字”

:nth-child(n+4)选取大于等于4标签，“n”表示从整数，下同

:nth-child(-n+4)选取小于等于4标签

:nth-child(2n)选取偶数标签，2n也可以是even

:nth-child(2n-1)选取奇数标签，2n-1可以是odd

:nth-child(3n+1)自定义选取标签，3n+1表示“隔二取一”

:last-child选取最后一个标签

:nth-last-child(3)选取倒数第几个标签,3表示选取第3个

[CSS3] :nth-child的用法相关推荐

最新文章

热门文章