关于CSS选择第一个和倒数第一个元素的方法

2024-04-15 06:27:29

本文主要介绍了CSS选择第一个和倒数第一个元素的解决方法，这里用到了first-child和:last-child，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

前端新手会遇到不知道如何选择列表中的第一个和倒数第一个元素，其实这非常简单。以后所有关于CSS选择的问题，都可以直接搜索CSS选择器的手册，里面有所有的CSS选择解决方法。

今天主要介绍CSS如何选择第一个和倒数第一个元素，这里就需要用到:first-child和:last-child。

:first-child

说明：匹配父元素的第一个子元素。

语法：

1	`E:first-child{}`

示例代码：

1

2

3

4

5

6

7

8

<style>

li:first-child{color:#f00;}

</style>

<ul>

<li>列表项一</li>

<li>列表项二</li>

<li>列表项三</li>

</ul>

在上述代码中，第一个元素的字体会是红色字体。

:last-child

说明：匹配父元素的最后一个子元素，也就是倒数一个元素。

语法：

1	`E:last-child{}`

示例代码：

1

2

3

4

5

6

7

8

<style>

li:last-child{color:#f00;}

</style>

<ul>

<li>列表项一</li>

<li>列表项二</li>

<li>列表项三</li>

</ul>

在上述代码中，倒数第一的元素的字体会是红色字体。

到此这篇关于CSS选择第一个和倒数第一个元素的解决方法的文章就介绍到这了,希望可以对你有所帮助。

转自：微点阅读 https://www.weidianyuedu.com

关于CSS选择第一个和倒数第一个元素的方法相关推荐

CSS如何选择第一个和倒数第一个元素
本文主要介绍了CSS选择第一个和倒数第一个元素的解决方法,这里用到了first-child和:last-child,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要 ...
[你必须知道的css系列]第一回：丰富的利器2：CSS选择符之子选择符、相邻选择符...
对了,接下来要讲的属性选择符,相邻选择符,子对象选择符可能大家稍微有点陌生了,这当然也是有原因的,因为IE6及以下的浏览器并不支持这几个选择符,而大多数从事这方面工作的技术人员,多数时候还是主要考虑 ...
[你必须知道的css系列]第一回：丰富的利器：CSS选择符之通配符、类选择符、包含选择符、ID选择符...
一般没有系统的学习过,只是在网上看一些片断教程的人.见到最多的可能也就是: 元素选择符(例如:body .a .li ) ID选择符(例如:#head.#body.#foot) 类选择符(例如:.re ...
css表示第一个元素和最后一个元素,CSS第一个和最后一个子元素
我在一个div中渲染2个按钮,并且想要向左和向右浮动一个按钮.CSS第一个和最后一个子元素我以为我可以使用:第一,孩子最后:子元素,但似乎对CSS的:第一胎运行,并且然后在写的:最后一子标签我还使 ...
西农计算机考研专业课压分,考研：西农大计算机初试第一名被淘汰，倒数第一成功逆袭...
近期看了多所高校的考研录取名单,发现一个很普遍的现象,如果该校最终要刷的人是个位数,那么一般倒数第一都能逆袭成功上岸,而被淘汰掉的考生之中很大概率有初试高分者,且淘汰的原因就是面试不合格.在昨日西农大 ...
男生眼中“理想女友”工作排名，程序员排名第三，幼师倒数第一
当代社会,男女性择偶的时候,会综合考虑各个方面,比如颜值,身材,学识,性格,还有最重要的工作,工作好的人,即使其他方面一般,也很容易成为婚恋市场的"红人". 当代社会讲究男女平等, ...
湖北大学计算机考入清华,倒数第一考入清华如何逆袭？
高考考完后,宁海中学的赵启琛发了条QQ说说,"顿开金锁走蛟龙".那一刻,他内心雀跃,"估算了下,觉得700分稳了".高考成绩出来后,他考了705分. 还记得近日 ...
浙大计算机复试被刷再战,浙大复试刷掉笔试“第一”，录取了倒数第一，这就是考研的公平？...
原标题:浙大复试刷掉笔试"第一",录取了倒数第一,这就是考研的公平? 随着时代的不断发展,我们对教育也是越来越重视,尤其是高等教育这一领域,如今用人单位和企业对学历也是越来越注重, ...
不歧视双非的计算机院校,公平！考研西工大，双非院校倒数第一名考生上岸，本校考生被刷...
公平!考研西工大,双非院校倒数第一名考生顺利上岸,本校考生被刷作为考研人,心里最担心的是什么?相信不少考研人担心的不是努力不够,成绩不好,而是录取过程中的不公平.这种不公平最明显的体现就是某些985 ...

最新文章

热门文章