E:first-child

E:first-child { sRules }

• 要使該屬性生效，E元素必須是某個(gè)元素的子元素，E的父元素最高是body，即E可以是body的子元素
• 這里可能存在誤解：

  示例代碼：

  <ul> <li>列表項(xiàng)一</li> <li>列表項(xiàng)二</li> <li>列表項(xiàng)三</li> <li>列表項(xiàng)四</li> </ul>

  在上述代碼中，如果我們要設(shè)置第一個(gè)li的樣式，那么代碼應(yīng)該寫(xiě)成li:first-child{sRules}，而不是ul:first-child{sRules}。

• 來(lái)看這樣一段代碼：

  示例代碼：

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

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

• 假設(shè)將代碼簡(jiǎn)單地修改一下：

  示例代碼：

  p:first-child{color:#f00;} <div> <h2>我是一個(gè)標(biāo)題</h2> <p>我是一個(gè)p</p> </div>

  只是在p前面加了一個(gè)h2標(biāo)簽，你會(huì)發(fā)現(xiàn)選擇器失效了，沒(méi)有命中p，why?

• E:first-child選擇符，E必須是它的兄弟元素中的第一個(gè)元素，換言之，E必須是父元素的第一個(gè)子元素。與之類(lèi)似的偽類(lèi)還有E:last-child，只不過(guò)情況正好相反，需要它是最后一個(gè)子元素。

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