classA:nth-child(n) classA元素的父元素的第n个子元素且是classA元素才匹配 p{color:blue;}.type:nth-of-type(1){background-color:red;}/*.type:nth-child(1){*//*background-color:#f00;*//*}*/01234 :nth-of-type :nth-child 说明:.type:nth-child(1)匹配的是type的父元素的子元素中...
今天对这两个选择器好好地过了遍之后,个人觉得:nth-of-type更彪悍些,不容易出问题,尽管:nth-child貌似更常见些。所以以后要选择某某元素下的第几个什么标签,建议使用:nth-of-type,因为页面元素插入其他标签啊什么的是比较常见的,如果使用:nth-child,选择器可能就是嗝屁。 不过嘛,世事无绝对,最靠谱的就是对这...
CSS3引入了许多新的选择器,其中nth-child是一个非常有用的选择器,它可以根据元素位置来精确地选择元素。本文将对nth-child选择器的用法进行详细剖析。 二、nth-child属性作用 nth-child选择器主要用于选取特定位置的子元素,且该子元素在同级元素中的位置符合指定的规律。例如,你可以使用nth-child选择器来选取所有偶数...
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:...
写一个表格,通过 tr:nth-child(even) 实现斑马纹(让表格中的每一行都交替显示颜色)。 image.png 业务需求中可能会对表格数据进行过滤,通过添加 hidden 属性隐藏过滤掉的行。 此时斑马纹效果失效了,原因是隐藏的标签 (hidden) 也参与了 :nth-child(An+B) 的计算。
一、nth-child( ) 与 nth-of-type( )的定义与用法 nth-child(n) : 匹配父元素中的第 n 个子元素,元素类型没有限制。 nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。 n可以是一个数字,一个关键字,或者一个公式,比如:nth-child(odd) 奇数 ,nth-child(even) 偶数。
nth-child不仅仅只有一个,而是有一系列的这样的选择器,可以供我们在各种情况下使用. 代码语言:javascript 复制 :first-child:first-of-type:last-of-type:only-of-type:only-child:nth-child(n):nth-last-child(n):nth-of-type(n):nth-last-of-type(n):last-child ...
:nth-child(n)选择器匹配属于其父元素的第 n 个子元素,借助这个特性,可以实现选择第偶数次序的子元素、选择一定范围内的子元素等“批量选择操作”。 而它比较难理解的地方是参数表达式中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:...
:nth-child(n) 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。n 可以是一个数字,一个关键字,或者一个公式。提示: 请参阅选择器。该选择器匹配同类型中的第 n 个同级兄弟元素。 语法element:nth-child(n)element 是你想要选择的 HTML 元素。 n 是一个参数,可以是关键字(如 odd 或even),或者...