我们可以通过 CSS 来实现这样的效果,CSS 给我们提供了几个结构伪类选择器:first-child、last-child、nth-child(n)。 二、基本使用方法 1.常见使用方法 first-child:选择列表中的第一个标签。 举例:第一行字体显示为红色,代码如下: li:first-child{ color: red; } last-child:选择列表中的最后一个标签。 举...
这时与: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,这...
nth-child(2n+1)/nth-child(odd): 单行样式 .item li:nth-child(2n){background-color:red;}.item li:nth-child(2n+1){background-color:pink;} 实现前三个和后三个样式效果 实现前三个和后三个样式效果 nth-child(-n+3)匹配最前三个子元素 nth-last-child(-n+3)匹配最后三个子元素 .item li:...
这种不式不能引用负值,也就是说li:nth-child(-3)是不正确的使用方法。 :nth-child(n),其中n是一个简单的表达式,那么"n"取值是从“0”开始计算的,到什么时候结束我也不知道,如果你在实际应用中直接这样使用的话,将会选中所有子元素,比如说,在我们的demo中,你在li中使用":nth-child(n)",那么将选中所有的...
一、nth-child 和 nth-of-type 选择第几个元素可以想到nth-child和nth-of-type。 这两个的区别是,nth-child代表的是第几个子元素,而nth-of-type代表的是该标签类型的第几个元素。 直接看例子吧 :nth-child(2){ color: red } 选中第2个元素 image.png 然后是nth-of-type :nth-of-type(2){ color:...
CSS3之:nth-child伪类选择器 :nth-child(number)---匹配第number个元素,参数number必须大于0的整数 举例:li:nth-child(5){color:green;} :nth-child(an)---匹配所有倍数为a的元素。其中参数an中的字母n不能缺省。 :nth-child(an+b) |:nth-child(an-b)---倍数分组匹配,其中a,b均为正整数或0, 举例...
一、nth-child( ) 与 nth-of-type( )的定义与用法 nth-child(n) : 匹配父元素中的第 n 个子元素,元素类型没有限制。 nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。 n可以是一个数字,一个关键字,或者一个公式,比如:nth-child(odd) 奇数 ,nth-child(even) 偶数。
新增伪类 elem:nth-child(n)选中父元素下的第n个子元素,n可以接受具体的数 值,也可以接受函数。 elem:nth-last-child(n)作用同上,不过是从后开始查找。 elem:last-child选中最后一个子元素。 elem:only-child如果elem是父元素下唯一的子元素,则选中之。
在以上八个伪类选择器中,:first-child:last-child:nth-child(n):nth-last-child(n)在选择元素时,是按照其所有类型的兄弟元素开始计数,而:first-of-type:last-of-type:nth-of-type(n)nth-last-of-type(n),是按照其兄弟元素中,忽略除该元素以外的所有其他元素后开始计数的。
一、nth-child 和 nth-of-type 选择第几个元素可以想到nth-child和nth-of-type。 这两个的区别是,nth-child代表的是第几个子元素,而nth-of-type代表的是该标签类型的第几个元素。 直接看例子吧。 复制 :nth-child(2){color:red} 1. 2. ...