网站前端教程

CSS如何选择第一个和倒数第一个元素

网站前端教程 51源码 2024-01-22 人阅读

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

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

:first-child

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

语法:

E:first-child{}

示例代码:

<style>
li:first-child{color:#f00;}
</style>
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ul>

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

:last-child

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

语法:

E:last-child{}

示例代码:

<style>
li:last-child{color:#f00;}
</style>
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ul>

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

版权声明:文章搜集于网络,如有侵权请联系本站,转载请说明出处:https://www.51yma.cn/jiaocheng/wwebqianduanjiaocheng/1397.html
文章来源:
标签 CSS选择器