热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

CSS:第n个子()选择器

CSS:第n个子()选择器原文:https://www.ge

CSS:第 n 个子()选择器

原文:https://www.geeksforgeeks.org/css-nth-child-selector/

:第 n 个子() CSS 伪类选择器用于根据元素在一组兄弟中的位置来匹配元素。它匹配第 n 个子元素的每个元素,不管其父元素的类型如何。

语法:

:nth-child(number) {
// CSS Property
}

其中是代表匹配元素模式的单个参数。它可以是奇数、偶数,也可以是函数式符号。


  • 奇数:表示一系列中位置为奇数的元素:1、3、5 等。

  • 偶:表示位置在 2、4、6 等数列中偶的元素。

  • 函数符号( ): 对于 n 的每一个正整数或零值,它表示兄弟元素的位置与模式 An+B 匹配的元素。这里,A 表示整数步长,B 表示整数偏移量。

例 1: 在本例中,选择每一个奇数段。使用的公式是 2n+1,即选择 1、3、5 等段落。

超文本标记语言




    
    


    


            GeeksforGeeks
        


    


            CSS :nth-child Selector
        


    

A computer science portal for geeks.


    

Geeks classes an extensive classroom programme.




输出:

nthchild

例 2: 在本例中,每隔一个偶数

  • 被选择,即 2、4、6 等。

    超文本标记语言




        
        


        


                CSS :nth-child Selector
            


    Sorting Algorithms


        

              
    • Quick sort.

    •         
    • Merge sort.

    •         
    • Insertion sort.

    •         
    • Selection sort.

    •     



    输出:

    nthchild

    支持的浏览器:以下是:第 n 个子()选择器支持的浏览器:


    • 谷歌 Chrome 4.0

    • 微软边缘 12.0

    • Firefox 3.5

    • 歌剧 9.6

    • 苹果 Safari 3.2

    • Internet Explorer 9.0


  • 推荐阅读
    • CSS3选择器的使用方法详解,提高Web开发效率和精准度
      本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
    • VScode格式化文档换行或不换行的设置方法
      本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
    • MyBatis多表查询与动态SQL使用
      本文介绍了MyBatis多表查询与动态SQL的使用方法,包括一对一查询和一对多查询。同时还介绍了动态SQL的使用,包括if标签、trim标签、where标签、set标签和foreach标签的用法。文章还提供了相关的配置信息和示例代码。 ... [详细]
    • 合并列值-合并为一列问题需求:createtabletab(Aint,Bint,Cint)inserttabselect1,2,3unionallsel ... [详细]
    • 十大经典排序算法动图演示+Python实现
      本文介绍了十大经典排序算法的原理、演示和Python实现。排序算法分为内部排序和外部排序,常见的内部排序算法有插入排序、希尔排序、选择排序、冒泡排序、归并排序、快速排序、堆排序、基数排序等。文章还解释了时间复杂度和稳定性的概念,并提供了相关的名词解释。 ... [详细]
    • 本文由编程笔记#小编为大家整理,主要介绍了logistic回归(线性和非线性)相关的知识,包括线性logistic回归的代码和数据集的分布情况。希望对你有一定的参考价值。 ... [详细]
    • 微软头条实习生分享深度学习自学指南
      本文介绍了一位微软头条实习生自学深度学习的经验分享,包括学习资源推荐、重要基础知识的学习要点等。作者强调了学好Python和数学基础的重要性,并提供了一些建议。 ... [详细]
    • 本文介绍了九度OnlineJudge中的1002题目“Grading”的解决方法。该题目要求设计一个公平的评分过程,将每个考题分配给3个独立的专家,如果他们的评分不一致,则需要请一位裁判做出最终决定。文章详细描述了评分规则,并给出了解决该问题的程序。 ... [详细]
    • 本文详细介绍了Java中vector的使用方法和相关知识,包括vector类的功能、构造方法和使用注意事项。通过使用vector类,可以方便地实现动态数组的功能,并且可以随意插入不同类型的对象,进行查找、插入和删除操作。这篇文章对于需要频繁进行查找、插入和删除操作的情况下,使用vector类是一个很好的选择。 ... [详细]
    • ALTERTABLE通过更改、添加、除去列和约束,或者通过启用或禁用约束和触发器来更改表的定义。语法ALTERTABLEtable{[ALTERCOLUMNcolu ... [详细]
    • Java学习笔记之使用反射+泛型构建通用DAO
      本文介绍了使用反射和泛型构建通用DAO的方法,通过减少代码冗余度来提高开发效率。通过示例说明了如何使用反射和泛型来实现对不同表的相同操作,从而避免重复编写相似的代码。该方法可以在Java学习中起到较大的帮助作用。 ... [详细]
    • 在Oracle11g以前版本中的的DataGuard物理备用数据库,可以以只读的方式打开数据库,但此时MediaRecovery利用日志进行数据同步的过 ... [详细]
    • MySQL插入数据的四种方式及安全性分析
      本文介绍了MySQL插入数据的四种方式:插入完整的行、插入行的一部分、插入多行和插入查询结果,并对其安全性进行了分析。在插入行时,应注意字段的定义和赋值,以提高安全性。同时指出了使用insert语句的不安全性,应尽量避免使用。建议在表中定义相关字段,并根据定义的字段赋予相应的值,以增加插入操作的安全性。 ... [详细]
    • 本文介绍了如何使用MATLAB调用摄像头进行人脸检测和识别。首先需要安装扩展工具,并下载安装OS Generic Video Interface。然后使用MATLAB的机器视觉工具箱中的VJ算法进行人脸检测,可以直接调用CascadeObjectDetector函数进行检测。同时还介绍了如何调用摄像头进行人脸识别,并对每一帧图像进行识别。最后,给出了一些相关的参考资料和实例。 ... [详细]
    • Oracle 和 mysql的9点区别【MySQL】
      数据库|mysql教程oracle,Oracle,money,mysql,coun数据库-mysql教程1.组函数用法规则mysql中组函数在select语句中可以随意使用,但在o ... [详细]
    author-avatar
    lw65112779
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有