CSS :first-child 偽元素

2018-01-06 14:10 更新

CSS :first-child 選擇器

CSS完整選擇器完整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%;}

Examples

實例

實例 1

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

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

嘗試一下 ?

實例 2

<p>元素是其父級的第一個子元素,每個<p>元素的 <i>元素的樣式:

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

嘗試一下 ?

實例 3

列表中的第一個 <li>元素選擇的樣式:

li:first-child
{
  background:yellow;
}

嘗試一下 ?

實例 4

每一個<ul>元素的第一個子元素選擇的樣式::

ul>:first-child
{
  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完整選擇器完整CSS選擇器參考手冊

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號