css :first-child偽類選擇器用法介紹
此選擇器能夠匹配元素集合中第一個元素。
:first-child偽類選擇器要和其他選擇器配合使用,例如:
[CSS] 純文字檢視 複製程式碼li:first-child
以上程式碼可以匹配li元素集合中第一個li元素。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> li:first-child{color:green;} </style> </head> <body> <ul> <li>html專區</li> <li>Div+css專區</li> <li>Jquery專區</li> <li>Javascript專區</li> </ul> </body> </html>
以上程式碼可以將li元素集合中第一個li元素中的字型顏色設定為綠色。
相關文章
- css :target偽類選擇器簡單介紹CSS
- css多類選擇器用法介紹CSS
- CSS 偽類選擇器CSS
- CSS E:default 偽類選擇器CSS
- CSS E:disabled偽類選擇器CSS
- CSS E:disabled 偽類選擇器CSS
- CSS E:checked 偽類選擇器CSS
- CSS E:hover偽類選擇器CSS
- CSS E:hover 偽類選擇器CSS
- css :focus選擇器用法介紹CSS
- CSS偽類與偽元素選擇器區別CSS
- CSS3新增選擇器(屬性選擇器、結構偽類選擇器、偽元素選擇器)CSSS3
- CSS :focus-within 偽類選擇器CSS
- CSS偽類選擇器是什麼CSS
- CSS @page:left列印偽類選擇器CSS
- CSS @page:first列印偽類選擇器CSS
- css偽類選擇符CSS
- CSS樣式中的通用選擇器和偽類選擇器CSS
- CSS @page:right列印偽類選擇器CSS
- CSS的總結(選擇器,偽類等…)CSS
- HTML表單及CSS選擇器、偽類和偽元素HTMLCSS
- 徹底理解CSS結構偽類選擇器CSS
- CSS 連結偽類選擇器順序原理CSS
- CSS E:lang()偽類選擇符CSS
- CSS選擇器(6)——偽元素CSS
- CSS E::after 偽元素選擇器CSS
- 002---選擇器(標籤選擇器、類選擇器、id選擇器、偽類選擇器、萬用字元選擇器)字元
- 有趣的CSS題目(10):結構性偽類選擇器CSS
- CSS class 類選擇器CSS
- CSS多類選擇器CSS
- css選擇器的解析順序簡單介紹CSS
- CSS3屬性選擇器簡單介紹CSSS3
- 偽類選擇器:愛恨法則;偽元素選擇器:before,after;清除浮動
- css選擇器中:first-child與:first-of-type的區別CSS
- CSS中一些利用偽類、偽元素和相鄰元素選擇器的技巧CSS
- 一個選擇器工具。測試結構偽類選擇器方法
- css選擇器的分類CSS
- jQuery選擇器介紹:基本選擇器、層次選擇器、過濾選擇器、表單選擇器jQuery