首页 > 其他分享 >css 中 nth-child、first-child、last-child 的使用(选中第一个,第几个,第几个到第几个,最后一个等)

css 中 nth-child、first-child、last-child 的使用(选中第一个,第几个,第几个到第几个,最后一个等)

时间:2024-08-21 15:48:01浏览次数:11  
标签:pink last 第几个 color li nth child

可以配合 li 标签使用,选择一列中的哪些标签。

 1.first-child 选择列表中的第一个标签

li:first-child{color:red}

 2. last-child 选择列表中的最后一个标签

li:last-child{color:pink}

 3.nth-child(n)

这里的n为数字,表示选择列表中的第n个标签

例如选择第三个标签

li:nth-child(3){color:pink}

 4.nth-child(2n) 

选择列表中的偶数,选中 2、4、6…… 个标签。

li:nth-child(2n){color:pink}

 5.同理.nth-child(2n-1)就表示选中了奇数位标签 

 li:nth-child(2n-1){color:pink}

 6.选择从第4个到最后一个标签,这个4可以提换成你需要的数字

li:nth-child(n+4){color:pink}

 7. 选择从第一个到第四个 这里的数字4也是可以根据你的需要替换的。

li:nth-child(-n+4){color:pink}

 8.nth-last-child(3) 表示最后三个标签

li:nth-last-child(3){color:pink}

  9.nth-last-child(3n) 表示3的倍数3.6.9……

li:nth-last-child(3n){color:pink}

 10.nth-last-child(3n-1) 表示2.5.8…… 可以用这个设置等差数列的样式

li:nth-last-child(3n-1){color:pink}

希望有帮到你。

标签:pink,last,第几个,color,li,nth,child
From: https://www.cnblogs.com/maqianhan/p/18371820

相关文章

  • 使用 OpenTelemetry (OTel) 实现 Elastic RUM (真实用户监控)
    本文继续介绍OpenTelemetry与ElasticObservability的结合,详细讲解了如何使用DockerCompose或Kubernetes设置OpenTelemetry演示。Elastic真实用户监控(RUM)捕捉用户与网页浏览器的交互,并从性能角度提供有关“真实用户体验”的详细视图。Elastic的RUMAgent是一个J......
  • 2788647047_last
    importrequestsimportpandasaspdfromopenpyxlimportWorkbook#读取域名文件withopen("domains.txt","r")asf:domains=f.readlines()#去除注释和空行domains=[line.strip()forlineindomainsifnotline.startswith("#")andline.......
  • Elasticsearch怎么导出索引数据至CSV
    保存Search打开kibana选择需要保存的index定义好时间区间,需要导出的字段等分享CSV下载CSV导出成功在右下角会出现下载链接......
  • ElasticSearch IK分词器的MySQL热部署字典(Docker)
    1.下载插件源码找到自己对应ES版本的下载Releases·infinilabs/analysis-ik·GitHub2.添加mysql驱动依赖<dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.......
  • CSS的:last-of-type伪类:精准定位末尾元素的样式秘诀
    在CSS中,伪类是一种强大的工具,它允许我们根据文档的上下文关系选择元素,而不仅仅是它们的类型或类名。:last-of-type伪类是这些工具中的一个,它可以用来选择一个父元素中最后一种特定类型的子元素。这种能力在设计复杂的布局时非常有用,比如在列表、表格或嵌套元素中添加特定的......
  • go elasticsearch聚合统计
    在Go语言中使用Elasticsearch进行聚合统计,你可以使用 olivere/elastic  这个流行的Elasticsearch客户端库。以下是一个使用 olivere/elastic  进行聚合统计的示例代码:首先,你需要安装 olivere/elastic  库:gogetgithub.com/olivere/elastic然后,你可以编写......
  • Elasticsearch(ES)(版本7.x)数据更新后刷新策略RefreshPolicy
    Elasticsearch(ES)(版本7.x)数据更新后刷新策略RefreshPolicy介绍ES数据写入后,默认1s后才会被搜索到(refresh_interval为1);这样可能是考虑到性能问题,毕竟实时IO消耗较多资源造成的问题例如一个索引现在有100个文档,当新增一个文档时,立即查询,显示数量为100,并不为101例如......
  • docker安装Elasticsearch
     一、创建网络 dockernetworkcreatees-net 二、拉取镜像 dockerpullelasticsearch:8.6.0 三、创建容器 dockerrun-d\--nameelasticsearch\--networkes-net\-p9200:9200\-p9300:9300\--privileged\elasticsearch:8.6.0 四、修改......
  • ElasticSearch分词器
    什么是分词器❓顾名思义,文本分析就是把全文本转换成一系列单词(term/token)的过程,也叫分词。在ES中,Analysis是通过分词器(Analyzer)来实现的,可使用ES内置的分析器或者按需定制化分析器。分词器组成部分分词器是专门处理分词的组件,分词器由以下三部分组成:characte......
  • ElasticSearch接口
    DSL语法DSL为ES过滤数据时的语法,可用于查询、删除等操作基本构成默认分页查询,size默认为10。ES查询默认最大文档数量限制为10000,可通过index.max_result_window配置来控制,建议考虑通过滚动查询或其他策略实现超过10000限制的查询{"query":{"match":{......