E:first-child

E:first-child { sRules }

• 要使該屬性生效，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，只不過情況正好相反，需要它是最后一個子元素。

• 淺綠 = 支持
• 紅色 = 不支持
• 粉色 = 部分支持