css:first-child偽類選擇器用於匹配父元素中的第乙個子元素。
:first-child偽類選擇器僅僅會匹配某個父元素中的第乙個子元素，例如：
<article>
<p>
第乙個段落...
<p>
第二個段落...
如果使用下面的css規則來新增樣式，那麼第乙個段落的文字大小將被修改：
p:first-child
但是如果在容器中，段落不是第乙個元素，那麼它不會被匹配，例如：
<article>
<h1>標題
<p>
第乙個段落...
<p>
第二個段落...
如果還是使用上面的css規則，將沒有段落元素會被匹配。
在這種情況下，如果你想匹配第乙個段落，可以使用:first-of-type偽類選擇器。正如其名字所示，:first-of-type偽類選擇器匹配的是某種型別元素的第乙個元素。使用下面的**將匹配h1標題之後的第乙個段落元素：
p:first-of-type
示例**
假如你有一段這樣的html**：
<article>
<h1>這是乙個標題元素
<p>
第乙個段落，但不是父元素中的第乙個元素。
<p>
第二個段落。 <span>這是段落中的乙個行內元素。
<ul>
<li>第乙個無序列表項
<li>第二個無序列表項
<li>第三個無序列表項
下面的**會匹配第二個段落中的行內元素。
span:first-child
下面的**會匹配第乙個無序列表項。
li:first-child
下面的**通過::before和::after偽元素來為元素新增內容。
span:first-child::before
span:first-child::after
下面的例子是上面**的實際效果。
第乙個段落，但不是父元素中的第乙個元素。
第二個段落。 這是段落中的乙個行內元素。
瀏覽器支援
所有的現代瀏覽器都支援:first-child偽類選擇器，包括：chrome, firefox, safari, opera9.5+, internet explorer 7+ 以及 android 和 ios。
在ie7中，如果元素是動態加入的，則不會被更新樣式。
在ie8中，如果是通過鏈結來動態插入的元素不會被新增樣式，直到該鏈結失去焦點。
CSS屬性 背景屬性 or 浮動屬性
background color red background image url background repeat no repeat repeat repeat x repeat y background position 水平位置 垂直位置 可以給負值 background attachme...
復合屬性 列表屬性 文字屬性
background 復合屬性 url 位址 本地位址，網路位址 repeat 預設值 水平和垂直都鋪滿 repeat x 只鋪滿水平方向 左右 repeat y 只鋪滿垂直方向 上下 no repeat 不平鋪 放不滿，留出空白 background size 100 100 背景縮放 boxba...
CSS屬性 文字屬性 or 列表屬性
font weight bolder 更粗的 bold 加粗 normal 常規 lighter 細的 font weight 100 900 100 500 不加粗 600 900 加粗 常用 100 細體 400 正常 700 加粗 900 更粗 font style italic 傾斜字 ob...