E:first-child

語法:

E:first-child { sRules }

說明:

相符父元素的第一個子元素E。
  • 要使該屬性生效,E元素必須是某個元素的子元素,E的父元素最高是body,即E可以是body的子元素
  • 這裡可能存在誤解:

    示例程式碼:

    <ul> <li>列表項一</li> <li>列表項二</li> <li>列表項三</li> <li>列表項四</li> </ul>

    在上述程式碼中,如果我們要設定第一個li的樣式,那麼程式碼應該寫成li:first-child{sRules},而不是ul:first-child{sRules}

  • 來看這樣一段程式碼:

    示例程式碼:

    p:first-child{color:#f00;} <div> <p>我是一個p</p> </div>

    這段程式碼你能看到p元素被命中變成了紅色

  • 假設將程式碼簡單地修改一下:

    示例程式碼:

    p:first-child{color:#f00;} <div> <h2>我是一個標題</h2> <p>我是一個p</p> </div>

    只是在p前面加了一個h2標簽,你會發現選擇器失效了,沒有命中p,why?

  • E:first-child選擇符,E必須是它的兄弟元素中的第一個元素,換言之,E必須是父元素的第一個子元素。與之類似的偽類還有E:last-child,只不過情況正好相反,需要它是最後一個子元素。

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
6.0 2.0+ 4.0+ 3.1+ 3.5+ 3.2+ 2.1+ 18.0+
IE7.0+

示例: