CSS选取子标签元素：nth-child、first-child、last-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个标签。

原文链接：https://blog.csdn.net/zsg88/article/details/64165993/

CSS选取子标签元素：nth-child、first-child、last-child相关推荐

html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）...
一.标签选择器 Document h1 { color: red; } h2{ color: green; } Hello World! Hello World! Hello ! Hello ! 二. ...
css 选取第一个标签元素
css 选取第一个标签元素方法一:直接获取对应class类名的第一个标签 <div class="idcardlist"> <div class="i ...
html标签元素中定义样式表的属性名是,HTML标签属性与CSS样式
定义:超文本标记语言 Hypetext Markup Language 特点: 不需要编译,直接由浏览器执行是一个文本文件必须用htm或html作文件后缀对大小写不敏感,HTML或html都可以 ...
css display:flex 弹性布局子标签设置宽度无效的问题
前言最难的果然还是css,工作中经常使用display:flex; 让多个竖直排列的元素变成横向排列,直到今天才发现display:flex; 会导致子标签的宽度失效. 正文问题 <div ...
[css] 有哪些标签是不支持伪元素的？
[css] 有哪些标签是不支持伪元素的? 首先我们要知道伪元素有哪些: ::after ::before ::first-letter ::fist-line (单双冒号皆可) ::selection ...
CSS如何实现两个a标签元素的文字一个靠左一个靠右，并且能点击分别不同的链接
CSS如何实现两个a标签元素的文字一个靠左一个靠右,并且能点击分别不同的链接作为一个非专业前端,有时候开发又必须自己写一些简单的前端,在网上有时候不能及时查找到内容,只能自己尝试,如下是实现两个sp ...
html获取子节点数量,css判断子元素个数
这次给大家带来css判断子元素个数,css判断子元素个数的注意事项有哪些,下面就是实战案例,一起来看一下. 工作时遇到这样一个问题:根据某元素所包含的子元素个数,分别设置不同的样式,这个用js可以解决 ...
html中怎么写css代码,html style样式标签元素教程
html标签元素之时时在构造html时,使用到style标签. 认识与用法教程一.基本语法 style英文翻译:格式.气概含意从字面上也不难晓得与CSS款式干系的标签. 完结.标签内放CSS代码 ...
Layer 父窗口如何获得子窗口的标签元素值
父窗口获取子窗口标签元素值(Layer插件) 获取子窗口的标签元素值如下: layer.open({type: 2,area:["1650px","650px" ...
css实现子元素两头对齐
###css实现子元素两头对齐如何简单快速的实现css两头对齐 <style> .divCss{text-align: justify; text-align-last: justify ...

CSS选取子标签元素：nth-child、first-child、last-child

CSS选取子标签元素：nth-child、first-child、last-child相关推荐

最新文章

热门文章