CSS 选择器nth-child_css 被三整除-程序员宅基地

技术标签: Web  

前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”。

下面我将用几个典型的实例来给大家讲解:nth-child的实际用途:

还用低版本的IE浏览器的哥们请绕过!支持IE9及以后版本。IE7、IE8支持first-child伪类,不支持last-child。

:nth-child(2)选取第几个标签,“2可以是你想要的数字”

?
1
.demo 01  li:nth-child( 2 ){ background : #090 }

:nth-child(n+4)选取大于等于4标签,“n”表示从整数,下同

?
1
.demo 01  li:nth-child(n+ 4 ){ background : #090 }

:nth-child(-n+4)选取小于等于4标签

?
1
.demo 01  li:nth-child(-n+ 4 ){ background : #090 }
:nth-child( odd ) 与 :nth-child( even )

:nth-child(2n)选取偶数标签,2n也可以是even

?
1
.demo 01  li:nth-child( 2 n){ background : #090 }

:nth-child(2n-1)选取奇数标签,2n-1可以是odd

?
1
.demo 01  li:nth-child( 2 n -1 ){ background : #090 }

:nth-child(3n+1)自定义选取标签,3n+1表示“隔二取一”

?
1
.demo 01  li:nth-child( 3 n+ 1 ){ background : #090 }

:last-child选取最后一个标签

?
1
.demo 01  li:last-child{ background : #090 }

:nth-last-child(3)选取倒数第几个标签,3表示选取倒数第3个

?
1
.demo 01  li:nth-last-child( 3 ){ background : #090 }<br><br>

常用的选择器列表图 


.input-rungroup-dotsep .irg-fields .ipaddr-lastnum:after {
  content: "";
}
.input-rungroup-dotsep .irg-fields li:last-child :after {
  content: "";
}// IE9及以后支持选择器

.input-rungroup-dotsep .irg-fields li:nth-child(-n+3):after {
  content: ".";
}// IE9及以后支持选择器

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wuruixn/article/details/8473009

智能推荐

沉浸状态栏_implementation 'com.gyf.barlibrary:barlibrary:2.2.-程序员宅基地

文章浏览阅读142次。ImmersionBar.with(MainActivity.this).init();implementation 'com.gyf.barlibrary:barlibrary:2.2.9'需要的每一页都写_implementation 'com.gyf.barlibrary:barlibrary:2.2.9

【zimg入门之一】zimg高性能图片服务器浅谈_zimg 传入w和h 可以无限生成图片-程序员宅基地

文章浏览阅读4.4k次。综述2011年李彦宏在百度联盟峰会上就提到过互联网的读图时代已经到来[1],图片服务早已成为一个互联网应用中占比很大的部分,对图片的处理能力也相应地变成企业和开发者的一项基本技能。需要处理海量图片的典型应用有:1. 图片类应用,如百度相册。2. 导购类应用,如Guang.com。3. 电商类应用,如淘宝。4. 云存储服务,如七牛云存储。除此之外几乎所有的网站都需要考虑自己图_zimg 传入w和h 可以无限生成图片

SAR辐射校正_sar图像辐射校正-程序员宅基地

文章浏览阅读2.9k次。1)PPT: SAR数据基本处理技术: https://wenku.baidu.com/view/703635ca69dc5022abea0043.html2)高分辨率 SAR 定标参考目标辐射特性的校正方法.pdf http://xueshu.baidu.com/s?wd=paperuri%3A%2855f5104a42025ce12b39f33b90536e88%29&amp;amp;amp;fil..._sar图像辐射校正

黑马程序员——OC基础学习(五)---分类(Category),代码块Block和protocol代理设计模式_java partial oc category-程序员宅基地

文章浏览阅读727次。分类(Category),代码块Block和protocol代理设计模式知识总结_java partial oc category

Check Point R80.10 SmartConsole汉化&生成中文报表_checkpoint smartconsole-程序员宅基地

文章浏览阅读4k次,点赞2次,收藏7次。一.概述为了应对国产化的需求,CheckPoint从R80.10开始,支持对SmartConsole界面的汉化,并且可以导出中文报表。下面我们将以实际效果展示汉化的结果供参考。此汉化,需要下载一个SmartConsole的补丁程序:LanguageConfigPatch。下载此程序请查看sk112276二.SmartConsole汉化解压LanguageConfigPatch,copy解压的文件到..._checkpoint smartconsole

Apache Solr 远程命令执行漏洞(CVE-2019-0193)-程序员宅基地

文章浏览阅读1.5k次。Apache Solr 远程命令执行漏洞(CVE-2019-0193)声明:本篇文章仅限用于学习信息安全技术,请勿用于非法途径!1.漏洞描述2019年8月1日,Apache Solr官方发布了CVE-2019-0193漏洞预警,漏洞危害评级为严重。当solr开启了DataImportHandler功能,该模块中的DIH配置都可以通过外部请求dataconfig参数进行修改,DIH可包含..._cve-2019-0193

随便推点

小谈树形视图控件_cleftview treeview-程序员宅基地

文章浏览阅读1.5k次。 树形视图控件是一种相当实用的控件,这几天国庆放假,感觉没有什么事做,抽空看了看已经看了五六遍却仍不太懂的那个“企业管理系统”例子,里面用到了树形视图控件。我想,既然不能一下子学通,先弄个零件出来吧。以下是对树形视图控件使用的详细过程和一些心得体会。 使用过程: 1、利用MFC AppWizard (exe)创建一个单文档程序,在“MFC 应用程序向导 —步骤 6 共 _cleftview treeview

最新外卖点餐小程序开源源码 支持单店+多店双模式 含完整前后端代码包和搭建教程_开源外卖点餐-程序员宅基地

文章浏览阅读882次。给大家分享一个全新的外卖点餐小程序开源源码!该程序支持单店及多店模式,含完整的前后端代码和详细的搭建教程,让您轻松开启外卖点餐业务!_开源外卖点餐

Git clone项目时报错Permission denied (publickey).的解决方案_git clone permission denied (publickey).-程序员宅基地

文章浏览阅读7.4k次,点赞4次,收藏21次。在一台新设备上首次使用git clone 克隆GitHub仓库项目时,报了这个错误,如下:[email protected]: Permission denied (publickey).fatal: Could not read from remote repository.原因新设备还不存在ssh key或者ssh key失效,解决办法就是新建一个ssh key。步骤1、查看s..._git clone permission denied (publickey).

输电线路-杆塔-电力设施-安全穿戴等目标检测数据集-程序员宅基地

文章浏览阅读737次,点赞16次,收藏22次。需要的同学私信联系,对无人机、线路固定监控、变电站内巡检机器人、站内固定摄像头等采集的图像或视频进行端到端目标检测,采用深度学习和传统图像处理技术结合的技术实现巡检图像智能理解,实现输电线路和变电站设备识别、缺陷检测、异物检测等,能有效提高电力系统的安全性。因此小编整理了一份超完整的AI+电力智慧检测数据合集,包含10+电力领域细分场景的目标检测数据集,助力AI+电力智慧检测的研究与创新。01。

ADB的使用-程序员宅基地

文章浏览阅读83次。本质其实就是一个加强版的串口工具(这样理解大差不差)。adb命令其实对应一个server,在板子上有一个adb的守护进程。晚上大概试用了一下,就只是一个工具,真的是很乏善可陈。除此之外就是命令行工具,此外好像没啥了额。3 支持Android特色,可以安装apk。2 集成了ftp的功能,可以上传文件。1 支持网络,可以多客户端。

window10 下自带 ubuntu 系统git clone 出现 “Failed to connect to github.com port 443: Connection refused” 问题_ubuntu16.04 git clone时443: connection refused-程序员宅基地

文章浏览阅读1.2k次。window10 系统下的ubuntu 系统 git clone 出现Failed to connect to github.com port 443: Connection refused 问题fatal: unable to access 'https://github.com/kaldi-asr/kaldi.git/': Failed to connect to github.com port 443: Connection refused不论打开代理软件还是关掉代理软件都无法Git._ubuntu16.04 git clone时443: connection refused

推荐文章

热门文章

相关标签