1.:first-of-type
p:first-of-type 選擇屬于其父元素的首個p元素的每個p元素。
2.:last-of-type
p:last-of-type 選擇屬于其父元素的最后p元素的每個p元素。
3.:nth-of-type()
p:nth-of-type(n) 選擇屬于其父元素的第n個p元素的每個p元素。
4.:nth-last-of-type()
p:nth-last-of-type(n)選擇屬于其父元素的倒數(shù)第n個p元素的每個p元素。
<style>
p:first-of-type
{
background:red;
}
</style>
<h1>這是一個標(biāo)題</h1>
<p>這是第一個段落。</p> //當(dāng)前選中元素
<p>這是第二個段落。</p>
<p>這是第三個段落。</p>
<p>這是第四個段落。</p>
5.:only-of-type
p:only-of-type 選擇屬于其父元素唯一的p元素的每個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 選擇屬于其父元素的唯一子元素的每個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) 指定每個 p 元素匹配的父元素中第 n 個子元素
8.:nth-last-child()
p:nth-child(n) 指定每個 p 元素匹配的父元素中倒數(shù)第 n 個子元素
<style>
p:nth-child(2)
{
background:red;
}
</style>
<h1>這是一個標(biāo)題</h1>
<p>這是第一個段落。</p> //當(dāng)前選中元素
<p>這是第二個段落。</p>
<p>這是第三個段落。</p>
<p>這是第四個段落。</p>
<p><b>注意:</b> Internet Explorer 8 以及更早版本的瀏覽器不支持 :nth-child()選擇器.</p>
