1.:first-of-type
p:first-of-type 選擇屬于其父元素的首個(gè)p元素的每個(gè)p元素痹仙。
2.:last-of-type
p:last-of-type 選擇屬于其父元素的最后p元素的每個(gè)p元素憔晒。
3.:nth-of-type()
p:nth-of-type(n) 選擇屬于其父元素的第n個(gè)p元素的每個(gè)p元素。
4.:nth-last-of-type()
p:nth-last-of-type(n)選擇屬于其父元素的倒數(shù)第n個(gè)p元素的每個(gè)p元素妒御。
<style>
p:first-of-type
{
background:red;
}
</style>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是第一個(gè)段落。</p> //當(dāng)前選中元素
<p>這是第二個(gè)段落。</p>
<p>這是第三個(gè)段落辆床。</p>
<p>這是第四個(gè)段落。</p>
5.:only-of-type
p:only-of-type 選擇屬于其父元素唯一的p元素的每個(gè)p元素桅狠。
<style>
p:only-of-type
{
background:red;
}
</style>
<div>
<p>This is a paragraph.</p> //當(dāng)前選中元素
<h1>This is a paragraph.</h1>
</div>
<div>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div>
6.:only-child
p:only-child 選擇屬于其父元素的唯一子元素的每個(gè)p元素讼载。（即p是唯一的子元素）
<style>
p:only-of-type
{
background:red;
}
</style>
<div>
<p>This is a paragraph.</p> //當(dāng)前選中元素
</div>
<div>
<p>This is a paragraph.</p>
<h1>This is a paragraph.</h1>
</div>
7.:nth-child()
p:nth-child(n) 指定每個(gè) p 元素匹配的父元素中第 n 個(gè)子元素
8.:nth-last-child()
p:nth-child(n) 指定每個(gè) p 元素匹配的父元素中倒數(shù)第 n 個(gè)子元素
<style>
p:nth-child(2)
{
background:red;
}
</style>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是第一個(gè)段落轿秧。</p> //當(dāng)前選中元素
<p>這是第二個(gè)段落。</p>
<p>這是第三個(gè)段落咨堤。</p>
<p>這是第四個(gè)段落菇篡。</p>
<p><b>注意:</b> Internet Explorer 8 以及更早版本的瀏覽器不支持 :nth-child()選擇器.</p>
