偽類選擇器:first-child和:nth-child()和:first-of-type
阿新 • • 發佈：2017-06-26
head true http doctype 段落 元素 選擇 ont span x:first-child和x:nth-child(1)功能一樣，首先選中的是x元素，並且x元素必須是它父元素的第一個子元素，選擇器才成立，否則不能選中。其中x也可以是選擇器。由此看出nth-child功能強勁，完全可以代替first-child的功能。
x:first-of-type，選擇x元素的父元素的首個 x元素，但x不一定是它父元素的第一個子元素，x也不一定是標簽選擇器，也可以是id選擇器、類選擇器等。
<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type
{
background:#ff0000;
}
/*body的第一個子元素是h1不是p，但body的第一個p子元素是存在的，所以first-of-type能選中，如果換成firs-child或者nth-child(1)就不行了*/
</style>
</head>
<body>
<h1>這是標題</h1>
<p>這是第一個段落。</p>
<p>這是第二個段落。</p>
<p>這是第三個段落。</p>
<p>這是第四個段落。</p>
</body>
</html>
http://www.w3school.com.cn/cssref/css_selectors.asp
偽類選擇器:first-child和:nth-child()和:first-of-type