css选择类的第几个元素,css选择器怎么选取第几个元素
css选择器选取第几个元素的方法:1、使用“first-child”选择器选取属于其父元素的首个子元素;2、使用“last-child”选择列表中的最后一个标签;3、使用“nth-child(3)”选择第3个标签等等。
本文操作环境:windows7系统、HTML5&&CSS3版本、Dell G3电脑。
css用选择器选取第几个元素?
css怎么用选择器选取第几个元素?下面本篇文章来给大家介绍一下CSS使用选择器实现选取第几个元素效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
在前端开发中,我们可能会碰到这样的需求:想让列表中的第一个部分显示不同的样式 ,想让列表中的偶数部分显示不同的背景颜色,想让列表中的最后一部分样式不一样……这样的需求,我们怎样来实现?
其实,如果前面文件是php开发的,可以通过php的循环语句+判断语句+css样式来实现。但是,如果是静态代码,php就无法用了。
这时,我们还可以通过CSS来实现,CSS给我们提供了几个非常有用的样式参数:first-child、last-child、nth-child(n)。下面,详细看一下它们的使用。
1、first-child
first-child选择器用于选取属于其父元素的首个子元素的指定选择器。
选择li 列表中的 第一个li模块的背景颜色。
li:first-child{background:#090}
2、last-child
last-child表示选择列表中的最后一个标签,代码如下:
li:last-child{background:#090}
3、nth-child(3)
表示选择第3个标签,代码如下:
li:nth-child(3){background:#090}
上面代码中的3也可以改成其它数字,如4、5等。想选择第几个标签,就填写几。
4、nth-child(2n)
这个表示选择列表中的偶数标签,即选择 第2、第4、第6…… 标签。
5、nth-child(2n-1)
这个表示选择列表中的奇数标签,即选择 第1、第3、第5、第7……标签。
6、nth-child(n+3)
这个表示选择列表中的标签从第3个开始到最后。
7、nth-child(-n+3)
这个表示选择列表中的标签从0到3,即小于3的标签。
8、nth-last-child(3)
这个表示选择列表中的倒数第3个标签。
推荐:《css视频教程》
css选择类的第几个元素,css选择器怎么选取第几个元素相关推荐
- jq遍历子元素_jquery:::选择器/遍历/获取所有的子元素、兄弟元素
jquery是一个基于javascript的轻量级工具包,是基于javascript的函数库,它使得javascript开发更加高效快捷. 1,jquery的选择器分为: 基本选择器(又分为id选择器 ...
- css修改select选择框option被选中的背景颜色_这 16 个 CSS 伪类,助你提升布局效率!
作者:Chidume Nnamdi 译者:前端小智 来源:mediuum 大家都说简历没项目写,我就帮大家找了一个项目,还附赠[搭建教程]. css 伪类是用于向某些选择器添加特殊的效果,是动态的,指 ...
- 关于CSS选择第一个和倒数第一个元素的方法
本文主要介绍了CSS选择第一个和倒数第一个元素的解决方法,这里用到了first-child和:last-child,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要 ...
- 2天驾驭div+css_老婆竟然只知道几个css伪类,不行得惩罚她了
最近在教我老婆学习前端,她说想要学习前端,自己在家赚点外快,自己赚点家用.我也拗不过她,而且其实我也挺佩服的.所以就教她了.最近我想考一考她对css中伪类的了解,所以就问了她了解css多少个伪类,伪类 ...
- H5入门四:CSS选择的艺术
H5入门四:CSS选择的艺术 一.什么是CSS CSS层叠样式表(Cascading Style Sheets) 用于定义HTML内容在浏览器里面的显示样式 二.为什么学习CSS 三.CSS基本内容 ...
- 关于CSS伪类first-child的深入理解
关于CSS伪类first-child的深入理解 在CSS(CSS3)中,有一种选择器很特殊,那就是伪类,关于伪类有很多,这里详细分析其中的一种:first-child. 具体书写格式如下: eleme ...
- 前端学习(219):css伪类选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/str ...
- 6.:first-child子元素过滤选择器
通过上面章节的学习,我们知道使用:first过滤选择器可以获取指定父元素中的首个子元素,但该选择器返回的只有一个元素,并不是一个集合,而使用:first-child子元素过滤选择器则可以获取每个父元素 ...
- CSS伪类选择器nth-child 选择3的倍数个元素写法
CSS伪类选择器nth-child 选择3的倍数个元素写法 web开发中,经常有对列表的3倍数列表项单独设置样式的需求. ul li:nth-child(3n+3) { colo ...
最新文章
- Android学习记录之:Toast的使用
- go函数详解:函数定义、形参、返回值定义规范、函数内存分析、不支持重载、支持可变参数、基本数据类型和数组默认都是值传递的、支持自定义数据类型、函数返回值命名
- 使用多线程会加快文件读取速度吗?
- tbb flow graph node types
- leetcode39. 组合总和(回溯)
- iPhone 15 Pro有望实现屏下面容识别 三星已在研发相关技术
- C# 读取机器CPU信息,硬盘信息,网卡信息(转载)
- 【论文写作】课程指导平台的开发中系统部分代码如何写
- jabc spring
- spring Bean的生命周期管理
- php函数: urlencode
- 语言判断一个整数是奇数还是偶数_一个变量“存储”任意多的数 从“康托配对函数”聊开去...
- 计算机二级Java上机环境安装与使用
- 商汤物语:全球最大AI独角兽的雄心与优雅
- 贪心算法(greedy algorithm,又称贪婪算法)详解(附例题)
- Android手势密码
- MFC实现简易绘图软件
- Python中WEB开发(一)
- 表值函数,标量值函数详解
- CAP理论举例及说明
热门文章
- YTU3189: 一个菱形
- php 多店铺 小程序,PHP多店铺、多商户小程序商城源码 分销
- linux cc脚本,LINUX:CentOS防CC攻击脚本
- OA系统----考勤管理----JDBC,Ajax
- oracle 频繁操作删除对索引的影响吗,清除Oracle中无用索引 改善DML性能
- Zstack EPICS Archiver在小课题组的使用经验
- 计算机f1到f12作用,不明白F1到F12键到底有什么用?大白话教你怎么用这些快捷键...
- 在建立网站遇到的问题和一些建议
- 育碧蒙特利尔:荣耀战魂
- Jasperreports6.4.1+Jaspersoft studio6.4.1进行报表开发实战教程-PDF中文显示