CSS :first-child 偽元素

2018-01-06 14:10 更新

CSS :first-child 選擇器

定義和用法

:first-child選擇器匹配第一個(gè)子元素。

:first-child是一個(gè)偽類，它適用于任何元素，它是另一個(gè)元素的第一個(gè)子元素。

使用:first-child偽類，一個(gè)元素只有當(dāng)它是另一個(gè)元素的第一個(gè)子元素時(shí)才匹配。例如，p:first-child將選擇作為某個(gè)其他元素的第一個(gè)子元素的任何p元素。如果要選擇段落的第一個(gè)子元素，我們可以使用p>*:first-child。

例子：

body *:first-child {font-weight: bold;}
p:first-child  {font-size: 125%;}

實(shí)例

實(shí)例 1

匹配屬于父元素中第一個(gè)子元素的每個(gè)<p>元素

p:first-child
{
background-color:yellow;
}

嘗試一下 ?

實(shí)例 2

<p>元素是其父級(jí)的第一個(gè)子元素，每個(gè)<p>元素的 <i>元素的樣式：

p:first-child i
{
background:yellow;
}

嘗試一下 ?

實(shí)例 3

列表中的第一個(gè) <li>元素選擇的樣式：

li:first-child
{
background:yellow;
}

嘗試一下 ?

實(shí)例 4

每一個(gè)<ul>元素的第一個(gè)子元素選擇的樣式：:

ul>:first-child
{
background:yellow;
}

嘗試一下 ?

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。

選擇器
:first-child	4.0	7.0	3.0	3.1	9.6

注意: :first-child在IE8和更早版本IE版本中必須聲明<!DOCTYPE>

CSS :first-child 偽元素

CSS :first-child 選擇器

定義和用法

實(shí)例

實(shí)例 1

實(shí)例 2

實(shí)例 3

實(shí)例 4

瀏覽器支持

相關(guān)文章