文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

你了解css3的nth-child吗

:nth-child(n) 选择器匹配属于其父元素的第 n 个子元素，借助这个特性，可以实现选择第偶数次序的子元素、选择一定范围内的子元素等“批量选择操作”。...而它比较难理解的地方是参数表达式中n的含义，以及如何进行数学运算，这也是面试中考察的难点。...n 个子元素。...使用它的时候需要注意几点： 第 n 个子元素的计数是从 1 开始，不是从 0 开始的 选择表达式中的字母n代表 ≥0 的整数 基本操作 它有 3 种常见用法： 直接指明 n 的值：span:nth-child...(n + 3)：第 3 个开始到最后 骚操作：限制选择范围 上面的用法中的第三部分，一般都是使用n，而有时候也会用到-n，比如选取前 2 个元素就是：nth-child(-n + 2)。

73320
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    CSS3高级选择器用法

    、element[attr*=value] 匹配attr属性值中【包含】value的element元素 如：div[class*=on] 匹配class属性值中包含on的div元素 4、伪类选择器 4.1...、目标伪类：突出显示活动的锚点元素 语法：:target 如： a:target{} div:target{} 4.2、元素状态伪类：多数用在表单控件上，去匹配表单控件的不同状态 4.2.1、:enabled...4.2.2、:disabled 匹配每个被禁用元素（所有表单控件） 4.2.3、:checked 匹配每个已被选中的input元素（适用radio和checkbox） 4.3、结构伪类：从标记的层次结构来匹配元素...4.3.1、:first-child 匹配属于父元素中的首个子元素 4.3.2、:last-child 匹配属于其父元素中的最后一个子元素 4.3.3、:empty...匹配没有子元素（包含文本内容）的元素 4.3.4、:only-child 匹配属于其父元素中的唯一子元素 4.3.5、:nth-child(n)匹配属于其父元素中的第n个子元素 4.4、否定伪类：将匹配的元素排除在外

    63050

    Web - CSS3基础语法与盒模型

    :last-child选择父元素的最后一个子元素:nth-child(n) 第n个子元素:nth-of-type(n) 选择父元素下指定类型的第n个元素，只针对指定类型的元素进行计数和选择，而不会考虑其他类型的元素...:nth-last-child(n)] 从父元素的最后一个子元素开始计数，选择第n个元素:nth-last-of-type(n) 从父元素的最后一个指定类型的子元素开始计数，选择第n个元素元素关系选择器名称举例意义子选择器...有多种方法可以隐藏元素，每种方法都有其特点和适用场景：元素的隐藏1、display该属性值会让元素完全从文档流中移除，就好像这个元素在 HTML 文档中不存在一样。...也就是说，它会影响页面的布局，但不会显示内容，同时也不会响应鼠标事件等交互操作。行内元素和块元素的相互转换在 CSS3 中，可以使用display属性来实现行内元素和块元素的相互转换。...这种方式结合了行内元素和块元素的部分特点，元素既可以在一行内显示，又可以设置宽度、高度等块级元素的属性。

    10310

    CSS伪类与伪元素

    也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。...常见的伪元素选择器 div:first-child 选择属于其父元素的第一个子元素的每个div元素 div:last-child 选择属于其父元素最后一个子元素的每个div元素 div:nth-child...(n) 选择属于其父元素的第n个子元素的每个div元素 div:nth-last-child(n) 同上，从这个元素的最后一个子元素开始算 div:nth-of-type(n) 选择属于其父元素第n个div...元素的每个div元素 div:nth-last-of-type(n) 同上，但是从最后一个子元素开始计数 div:first-of-type 选择属于其父元素的首个div元素的每个div元素 div:last-of-type...CSS3规范中要求使用单冒号:用于CSS3伪类，双冒号::用于 CSS3伪元素，目的是区分伪类和伪元素。

    2K20

    SEEM 让你释放双手 | 对 SAM 进行升级，解决数据标注耗时耗力且繁琐的问题！

    作为一种无监督的方法，在训练过程中作者没有使用人群标注，而是从训练图像中生成伪标签。 在作者的损失函数中，参数 \omega 和 \beta 在优化性能方面起着关键作用。...作者的无监督方法能够有效地从图像中预测密度图，如图5所示，这使得作者可以在不需要人工标签的情况下精确预测人的位置。...尽管在训练过程中没有手动标注，但作者的方法显示出值得称赞的精确度，超过了表3中显示的几个监督方法。...6 Conclusion 在作者的研究中，作者引入了一种健壮的无监督人群计数方法，其性能优于先前的无监督方法，并且可以与一些监督方法相媲美。...作者提出了一种利用从多个 Mask 样本生成的软 Mask 上的高斯混合模型（GMM）拟合的计数技术，以及一种用新型损失函数训练的计数网络，该损失函数排除了不确定区域。

    21310

    jquery获取第几个子元素_js获取元素的指定子元素

    可以这样理解，页面中的元素有相同的父元素 的，并且里面又包含li元素的，那么就取第一个li元素，每个子类集合都要进行判断，直到找出所有符合要求的li元素； :last-child：这个也与上面相对了，...元素；对 于$(”label:only-child“)会选出是label元素，同时它是它父类唯一的子元素的label元素； :nth-child(n)：返回第n个子节点，n从1开始，如果n取0，...； :eq(n)：第n个匹配的元素(n从0开始)，如：li:eq(3)返回整个页面的第四个li元素，ul li:eq(1)返回页面中第一个ul元素下的第二个li元素，注意：只匹配一次就返回了； :gt...(n)：第n个匹配元素(不包括)之后的元素(n从0开始)，如：ul:gt(2)返回从第3个ul开始的所有ul元素(含第三个)； :lt(n)：第n个匹配元素(不包括)之前的元素(n从0开始)，如：ul...:lt(2)返回从第0个和第1个ul元素； 2.

    27.2K30

    CSS选择器

    :first-child和last-child选择器 :first-child选择器和:last child选择器分别用于为父元素中的第-个或者最后一个子元素设置样式。...:nth-child(n)和nth-last-child(n)选择器 使用:first- child选择器和:last- child选择器可以选择某个父元素中第-一个或最后一个子元素，但是如果用户想要选择第...2个或倒数第2个子元素，这两个选择器就不起作用了。...:nth-of-type(n)和:nth-last-of-type(n)选择器 这两种选择器的不同之处在于:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第...n个子元素和倒数第n个子元素，而:nth-child(n)和:nth-last-child(n)选择器用于匹配属于父元素的第n个子元素和倒数第n个子元素，与元素类型无关。

    2.5K11

    【CSS3】CSS3 结构伪类选择器 ( E:first-child E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )

    类型标签 子元素 ; E:nth-child(n) 选择器中的 n 可以有如下情况 : 数字 : 数字代表 父容器中子元素的索引值 ; n 从 1 开始计数 ; ul li:nth-child...*/ background-color: purple; } 公式 : 公式中的 n 是从 0 开始计数的 , 数字中的 n 是从 1 开始计数的 ; n...: 4、n 为公式的情况 公式 : 公式中的 n 是从 0 开始计数的 , 数字中的 n 是从 1 开始计数的 ; n : 表示所有的数值 , 取值范围 \{ n = 0 , 1 , 2 ,...指定 父容器中第 n 个 E 类型标签 ; div span:nth-of-type(2) { /* 选择 div 父容器下的 第二个 span 标签 */...span 标签 (第 4 个元素) div> 显示效果 :

    1.3K30

    十大经典排序算法的介绍及实现

    致命缺点是时间复杂度达到了 O(n^2) 。冒泡排序可以在算法中添加一个变量记录每轮迭代中是否发生位置交换，如果某一轮发现没有任何位置交换，说明数组已经是有序的，可以直接退出，无需再进行后续迭代了。...return nums 选择排序 每一轮选择整个数组中最小（或者最大）的元素将其和数组中第0个（或者最后一个）交换位置，找到最小（或最大）的元素后，剩下的元素继续重复这个操作。...举个例子：对于数组[5,2,5,3,1]，在第一轮迭代中交换变成了[1,2,5,3,5]，这样原本排在前面的5移动到了第2个5的后面。...[min],nums[i]=nums[i],nums[min] return nums 插入排序 从数组第1个元素开始枚举，依次和左侧的数值比较，直到找到一个比它还小的数，就插入到这个数的后面...，由于子数组都是有序的，所以只需从2个子数组的开头开始，依次比较，较小的那个填入到新数组，即将两个有序数组合并成一个有序数组。

    42220

    【UI自动化-2】UI自动化元素定位专题

    :F[n]：获取和E元素同级且位于其后的第n个F元素 preceding-sibling::F：获取和E元素同级且位于其前的F元素 preceding-sibling::F[n]：获取和E元素同级且位于其前的第...伪类选择器 这种选择器，要求目标元素必须有父级元素，且符合位置匹配条件，具体如下： E:nth-child(n)和E:nth-last-child(n)：两者的区别是前者正序计数，后者倒序计数。...以百度搜索框代码为例，span:nth-child(7)这样是匹配失败的，因为form元素内第7个子元素是input类型元素，不是span类型。...E:nth-of-type(n)与E:nth-child(n)的区别在于，前者匹配第n个E元素，后者匹配到第n个元素并判断是否是E元素，不是则匹配失败。...’] > input:nth-child(2)”) 属性class为s_ipt_wr的span元素的倒数第3个子元素，且其类型为input的元素（位置和类型不对应则匹配失败）By.cssSelector

    1.9K30

    Rarefy：稀释微生物群落数据的最新R包

    1.Rarefy中的多样性指数，分为alpha,beta,系统发育及功能多样性四大类。...image.png 4.beta多样性指数的稀释 1#directionalSAC还可用于计算有向、归一化有向、无向、归一化无向beta多样性与采样量之间的函数。...通过物种重采样和零模型模拟，构建了rao_perumue函数对期望的功能稀疏曲线进行检验，以排除外来物种的低功能多样性仅仅是由外来物种和本地物种数量不平衡造成的。...分三步进行： 1)从M个采样单元(duneFVG 128个样地)抽取的S种物种(62种本地种)中，随机选取s种(s<S); 2)计算s的功能差异矩阵和稀释的Rao Q指数。...3)对于每次置换，重复第1步和第2步，然后对N个置换求平均稀疏曲线。

    2.5K62

    jQuery选择器大全(48个代码片段+21幅图演示)

    举个例子：div:first返回的是整个DOM文档中第一个div元素，而div:first-child是返回所有div元素下的第一个元素合并后的集合。...——5.3 :nth-child 看到这个就想起英文单词里的，fourth, fifth, sixth……，nth表示第n个，:nth-child就表示第n个child元素。...要注意的是，这儿的n不像eq(x)、gt(x)或lt(x)是从0开始的，它是从1开始的，英文里好像也没有zeroth这样的序号词吧。...:nth-child有三种用法： 1) :nth-child(x)，获取第x个子元素  2) :nth-child(even)和:nth-child(odd)，从1开始，获取第偶数个元素或第奇数个元素 ...例如x = 3, y = 0时就是3n，表示取第3n个元素（n>=0）。实际上xn+y是上面两种的通项式。

    5K80

    前端架构师之01_JQuery

    元素 :even 获取索引为偶数的指定选择器中的奇数行数据，索引默认从0开始 $("li :even")获取所有li元素中，索引为偶数的奇数行数据，如索引为0,2,4的第1个、第3个和第5个n，n默认从0开始）的子元素 :first-child 获取第一个子元素 :last-child 获取最后一个子元素 :only-child...如果当前元素是唯一的子元素，则匹配 :nth-last-child(index/even/odd/公式) 选择所有它们父元素的第n个子元素。...计数从最后一个元素开始到第一个 :nth-of-type(index/even/odd/公式)) 选择同属于一个父元素之下，并且标签名相同的子元素中的第n个子元素 :first-of-type 选择所有相同的元素名称的第一个子元素.../odd/公式) 选择所有它们的父级元素的第n个子元素，计数从最后一个元素到第一个 带有“of-type” 与未带有“of-type”项的选择器有一定的区别。

    6800

    寒假提升 ｜ Day7 CSS 第五部分

    ) 属性(id属性、class属性、普通属性) {}(内容) $(数字) 隐式标签 CSS Emmet 结构伪类 - :nth-child :nth-child(1) 是父元素中的第1个子元素...:nth-child(2n) n代表任意正整数和0 是父元素中的第偶数个子元素(第2、4、6、8……个) 跟:nth-child(even)同义 :nth-child(2n + 1) n代表任意正整数和...0 是父元素中的第奇数个子元素(第1、3、5、7……个) 跟:nth-child(odd)同义 nth-child(-n + 2) 代表前2个子元素 结构伪类 - :nth-last-child( )...:nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数 :nth-last-child(1)，代表倒数第一个子元素...:nth-last-child(-n + 2)，代表最后2个子元素 :nth-of-type()用法跟:nth-child()类似 不同点是:nth-of-type()计数时只计算同种类型的元素 :nth-last-of-type

    1K10
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券