html中怎样选择第几个,CSS选取第几个标签元素：first-child、last-child、nth-child

1、first-child

first-child表示选择列表中的第一个标签。代码如下：

li:first-child{background:#090}

上面的意思是，li 列表中的第一个li模块的背景颜色。

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个标签。

last-of-type表示其父元素下的最后一个指定类型的元素。

发表评论

您的IP：111.126.94.254，来自：内蒙古赤峰市

html中怎样选择第几个,CSS选取第几个标签元素：first-child、last-child、nth-child相关推荐

html中怎么写css代码,html style样式标签元素教程
html标签元素之时时在构造html时,使用到style标签. 认识与用法教程一.基本语法 style英文翻译:格式.气概含意从字面上也不难晓得与CSS款式干系的标签. 完结.标签内放CSS代码 ...
CSS 使用border-radius属性实现标签元素变为正圆、椭圆、圆角矩形（可以自定义4个角的圆角大小）
1 使用详解 border-radius 说明:给元素的边框设置圆角,默认不设置圆角为矩形,可以给元素设置圆角将元素变为正圆.椭圆或圆角矩形语法: (1)border-radius:50%,给元素设 ...
工作中常用且容易遗忘的 CSS 样式清单整理
文章目录 1.文字超出部分显示省略号 2.中英文自动换行 3.文字阴影 4.设置placeholder的字体样式 5.不固定高宽 div 垂直居中的方法 6.解决IOS页面滑动卡顿 7.设置滚动条样式 ...
工作中常用且容易遗忘的css样式整理，建议收藏
1. 文字超出部分显示省略号单行文本的溢出显示省略号(一定要有宽度) p{width:200rpx;overflow: hidden;text-overflow:ellipsis;white-spa ...
html的css样式中表示后代选择器,html添加css——样式选择器
如何给html添加样式.两种方法:css 1.新创建一个css样式表,与原html同目录,而后经过link标签连接.如:(link标签是一个void元素,无结束标签.)html 2.直接在html源码 ...
HTML CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器
复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器.并集选择器.后代选择器.子元素选择器.相邻兄弟选择器和属性选择器等. 交集选择器交集选择器由两个选择器直接构成,其中第一个 ...
webpack中的style-resources-loader加载全局css变量
我们在项目中经常会遇到这种场景,抽离了一些公用的样式,并且还会定义一些变量,比如:variables , mixins , function,之前都是在每个样式文件中手动的@import导入.styl ...
如何在Windows Azure VM上的SQL Server和Windows Azure SQL Database两者中做出选择
作者信息:本篇文章是由SQL Server Cloud Infrastructure Team的 Madhan Arumugam 和 Guy Bowerman共同著作. 简介把SQL 数据托管在哪里 ...
遗传算法中的选择操作
锦标赛选择(Tournament Selection) 每次从种群中取一定数量(n)的个体(放回抽样),选择其中适应度较好的进入子代种群.重复该操作直到种群规模到和原来的种群规模一样.几元锦标赛就代表 ...

html中怎样选择第几个,CSS选取第几个标签元素：first-child、last-child、nth-child

html中怎样选择第几个,CSS选取第几个标签元素：first-child、last-child、nth-child相关推荐

最新文章

热门文章