CSS :first-child 偽元素,是什么意思以及用法
CSS:first-child選擇器
完整CSS選擇器參考手冊
定義和用法
:first-child選擇器匹配第一個子元素。
:first-child是一個偽類,它適用于任何元素,它是另一個元素的第一個子元素。
使用:first-child偽類,一個元素只有當它是另一個元素的第一個子元素時才匹配。例如,p:first-child將選擇作為某個其他元素的第一個子元素的任何p元素。如果要選擇段落的第一個子元素,我們可以使用p>*:first-child。
例子:
body *:first-child {font-weight: bold;} p:first-child {font-size: 125%;}
實例
實例 1
匹配屬于父元素中第一個子元素的每個<p>元素
p:first-child
{
background-color:yellow;
}
{
background-color:yellow;
}
實例 2
<p>元素是其父級的第一個子元素,每個<p>元素的 <i>元素的樣式:
p:first-child i
{
background:yellow;
}
{
background:yellow;
}
實例 3
列表中的第一個 <li>元素選擇的樣式:
li:first-child
{
background:yellow;
}
{
background:yellow;
}
實例 4
每一個<ul>元素的第一個子元素選擇的樣式::
ul>:first-child
{
background:yellow;
}
{
background:yellow;
}
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號。
選擇器 | |||||
---|---|---|---|---|---|
:first-child | 4.0 | 7.0 | 3.0 | 3.1 | 9.6 |
注意::first-child在IE8和更早版本IE版本中必須聲明<!DOCTYPE>
相關(guān)文章
CSS 教程: CSS 偽類
完整CSS選擇器參考手冊