前端新手會遇到不知道如何選擇列表中的第一個和倒數第一個元素，其實這非常簡單。以后所有關于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>

在上述代碼中，倒數第一的元素的字體會是紅色字體。

到此這篇關于CSS選擇第一個和倒數第一個元素的解決方法的文章就介紹到這了,更多相關css選擇第一個元素內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

總結

以上是生活随笔為你收集整理的CSS选择第一个和倒数第一个元素的解决方法(css选择器选择第一个子元素)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。