CSS3新增伪类用法

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>

9.表单控件的状态,:enabled :disabled :checked