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)选择属于其父元素的倒数第n个p元素的每个p元素。
<style>
p:first-of-type
{
background:red;
}
</style>
<h1>这是一个标题</h1>
<p>这是第一个段落。</p> //当前选中元素
<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> //当前选中元素
<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> //当前选中元素
</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 元素匹配的父元素中倒数第 n 个子元素
<style>
p:nth-child(2)
{
background:red;
}
</style>
<h1>这是一个标题</h1>
<p>这是第一个段落。</p> //当前选中元素
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
<p><b>注意:</b> Internet Explorer 8 以及更早版本的浏览器不支持 :nth-child()选择器.</p>
