Pseudo Class 伪类

伪类是在文档树之外进行选择的方法，伪类必须以:后跟类名完成。

语法：

伪类名	描述
:link	未访问的超链接。
:visited	已经访问过的超链接。
:hover	鼠标悬停在超链接上方时的样式。
:active	当前选中或者激活的超链接。
:focus	带有焦点（可以通过键盘或者鼠标获得焦点）的元素，此伪类可以组合使用，如 a:focus:hover。
:target	目标元素是指属性值的Url中带有锚标记的内容。如href="http://dotnet.aspx.cc/CSS3.aspx#top" 这样的元素。例如：p.node:target{}。该属性可以通过URL中的锚点标记定位页面中的元素。
:lang	:lang(语言编码)伪属性根据元素的语言进行匹配，语言可以有lang属性、meta 元素或者协议信息（如http头）中得到。样式语法：element:lang(language-code) { }。例如：:lang(zh){color:red}
:not	:not(X) 伪类以 X 为参数的简单选择器表达式，匹配所有不被参数表达的所有元素。如 p:not(.classy) { color: red; }；:not(p) { color: green; } 简单选择器表达式可以是：type selector（类型选择器）, universal selector（通用选择器）, attribute selector（属性选择器）, class selector（类选择器）, ID selector（ID 选择器）, 或者 pseudo-class（伪类选择器）。
:checked	用来根据选中的状态匹配单选框或者复选框。例如：:checked { width:60px;height:60px; }
:enabled	匹配状态为 enabled 的元素。
:disabled	匹配状态为 disabled 的元素。
:indeterminate	匹配那些不确定的元素，如单选框和复选框既没有 checked ，也没有不 checked 的不确定状态。
:root	文档的根元素，一般是 html 元素。
:nth-child	:nth-child(an+b) 匹配有an+b-1个兄弟节点的元素。同时接受 even 和 odd 关键字。例如： tr:nth-child(odd)：代表表格的奇数行； tr:nth-child(2n)：代表表格的偶数行； tr:nth-child(even)：代表表格的偶数行； span:nth-child(1)：代表span父元素的第一个子元素span，与；span:nth-child(0n+1) 相同。 span:nth-child(-n+3)：代表前3个 span 元素；
:nth-last-child	从后往前数的节点顺序。
:nth-of-type	:nth-of-type(an+b) 代表文档树中前面开始带有 an+b-1 兄弟节点的元素。
:nth-last-of-type	:nth-of-type(an+b) 代表文档树中后面开始带有 an+b-1 兄弟节点的元素。
:first-child	匹配某元素的第一个子元素。
:last-child	某元素的最后一个子元素。
:first-of-type	同 :nth-of-type(1)。
:last-of-type	同 :nth-last-of-type(1)。
:only-of-type	代表有父元素，并且父元素没有元素的节点，与:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1)相同，但有更低的优先权。
:empty	匹配没有任何子元素的元素。
:default	匹配一组元素中的默认元素，常用于按钮、菜单、下拉框等。例如表单的 type="submit" 按钮。
:valid	数据验证有效的元素。常用于 HTML5 中的表单验证。
:invalid	数据验证无效的元素。常用于 HTML5 中的表单验证。
:in-range	常用于有范围限制的元素。
:out-of-range	常用于有范围限制的元素。
:required	表单的必选项。
:optional	表单的可选项。
:selection	用户选中的文档部分。
:read-only	只读元素。
:read-write	可读写元素。
:first	文档打印第一页。例如： @page :first { margin:2in 3in; }
:left	打印的左页面的样式。
:right	打印的右页面的样式。

浏览器支持：

例子 1：

<style>
div:hover{background:yellow}
textarea:hover{background:yellow}
</style>

<div>CSS3 伪类 hover 测试。当鼠标移动到这里来之后，这里的背景颜色将变成黄色。</div>
<p>CSS3 伪类 hover 测试。当鼠标移动到这里来之后，这里的背景颜色将不会变成黄色。</p>
<textarea>CSS3 伪类 hover 测试。当鼠标移动到这里来之后，这里的背景颜色将变成黄色。</textarea>

测试结果：Internet Explorer 7，Internet Explorer 8，Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 1 的效果

例子 2：

<style>
textarea:focus{background:yellow}
</style>

<textarea>CSS3 伪类 focus 测试。当鼠标或者键盘将焦点移动到这里来之后，这里的背景颜色将变成黄色。</textarea>

测试结果：Internet Explorer 8，Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 2 的效果

例子 3：

<style>
:target{border:2px solid red;}
p.node:target{ border:2px solid red;background:yellow;}
</style>

<ol>
<li><a href="#target1">target1 测试</a></li>
<li><a href="#target2">target2 测试</a></li>
<li><a href="#top">top 测试</a></li>
</ol>
<h1 id="target1">id="target1" 的内容</h1>
<a href="http://dotnet.aspx.cc" name="target2">name="target2" 的链接</a>
<p class="node" id="top">lass="node" id="top" 的内容。</p>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。Internet Explorer 9 不支持name定义的标识符。

点击查看例子 3 的效果

例子 4：

<style>
:lang(zh-cn){ border:2px solid red;background:yellow;margin:20px 0;}
:lang(zh)
{
  box-shadow:  0.2em 0.2em 0.3em #888;
  -webkit-box-shadow:  0.2em 0.2em 0.3em #888;/* only Safari used */
}
</style>

<div lang="zh-cn">孟宪会之 CSS3 中文参考手册</div>
<div lang="zh">孟宪会之 CSS3 中文参考手册</div>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 4 的效果

例子 5：

<style>
div:not(.menu){ border:2px solid red;background:yellow;margin:20px 0;}
p :not(span){ color:red;} /* 注意这里的空格，p后面的空格要注意 */
</style>

<div class="menu">孟宪会之 CSS3 中文参考手册：这里应该没有背景颜色。</div>
<div>孟宪会之 CSS3 中文参考手册：里应该有背景颜色</div>
<p>  
  <label>label 元素的字体颜色是红色的。</label> 
  <span>span 元素的字体颜色不是红色的。</span>
</p>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 5 的效果

例子 6：

<style>
:checked { width:60px;height:60px; }
#ch1:checked { width:60px;height:60px; }
.ch2:checked { width:60px;height:60px; }
</style>

<input type="checkbox" />
<input id="ch1" type="checkbox" />
<input class="ch2" type="checkbox" />

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 6 的效果

例子 7：

<style>
:enabled { background:orange; }
:disabled { background:#000; }
</style>

<input type="button" enabled="enabled" value="我只是一个按钮" />
<input type="button" value="我也是一个按钮" onclick="this.disabled='disabled'" />

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 7 的效果

例子 8：

<style>
:root { background:yellow;}
</style>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 8 的效果

例子 9：

<style>
#first tr:nth-child(2n+1){background: yellow;}
#second tr:nth-child(even){background: yellow;}
#third tr:nth-child(2){background: yellow;}
#forth tr:nth-child(-n+3){background: yellow;}
</style>


<h2>表格1</h2>
<table border="1" id="first">
  <tr>
    <td>cell</td><td>cell</td>
  </tr>
  <tr>
    <td>cell</td><td>cell</td>
  </tr>
  <tr>
    <td>cell</td><td>cell</td>
  </tr>
  <tr>
    <td>cell</td><td>cell</td>
  </tr>
  <tr>
    <td>cell</td><td>cell</td>
  </tr>    
</table>
<h2>表格2</h2>
<table border="1" id="second">
  <tr>
    <td>cell</td><td>cell</td>
  </tr>
  <tr>
    <td>cell</td><td>cell</td>
  </tr>
  <tr>
    <td>cell</td><td>cell</td>
  </tr>
  <tr>
    <td>cell</td><td>cell</td>
  </tr>
  <tr>
    <td>cell</td><td>cell</td>
  </tr>    
</table>
<h2>表格3</h2>
<table border="1" id="third">
  <tr>
    <td>cell</td><td>cell</td>
  </tr>
  <tr>
    <td>cell</td><td>cell</td>
  </tr>
  <tr>
    <td>cell</td><td>cell</td>
  </tr>
  <tr>
    <td>cell</td><td>cell</td>
  </tr>
  <tr>
    <td>cell</td><td>cell</td>
  </tr>    
</table>

<h2>表格4</h2>
<table border="1" id="forth">
  <tr>
    <td>cell</td><td>cell</td>
  </tr>
  <tr>
    <td>cell</td><td>cell</td>
  </tr>
  <tr>
    <td>cell</td><td>cell</td>
  </tr>
  <tr>
    <td>cell</td><td>cell</td>
  </tr>
  <tr>
    <td>cell</td><td>cell</td>
  </tr>    
</table>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 9 的效果

例子 10：

<style>
div {margin:6px;}
#menu1 :nth-last-child(-n+5){background:yellow;}
#menu2 :nth-last-child(odd){background:yellow;}
</style>

<h2>测试1</h2>
<div id="menu1">
  <div>孟宪会之CSS3中文参考一</div>
  <div>孟宪会之CSS3中文参考二</div>
  <div>孟宪会之CSS3中文参考三</div>
  <div>孟宪会之CSS3中文参考四</div>
  <div>孟宪会之CSS3中文参考五</div>
  <div>孟宪会之CSS3中文参考六</div>
  <div>孟宪会之CSS3中文参考七</div>
  <div>孟宪会之CSS3中文参考八</div>
  <div>孟宪会之CSS3中文参考九</div>
  <div>孟宪会之CSS3中文参考十</div>
</div>
<h2>测试2</h2>
<div id="menu2">
  <div>孟宪会之CSS3中文参考一</div>
  <div>孟宪会之CSS3中文参考二</div>
  <div>孟宪会之CSS3中文参考三</div>
  <div>孟宪会之CSS3中文参考四</div>
  <div>孟宪会之CSS3中文参考五</div>
  <div>孟宪会之CSS3中文参考六</div>
  <div>孟宪会之CSS3中文参考七</div>
  <div>孟宪会之CSS3中文参考八</div>
  <div>孟宪会之CSS3中文参考九</div>
  <div>孟宪会之CSS3中文参考十</div>
</div>

上面的menu1中的子元素div，最后5个子div的背景颜色是黄色的，menu2中，从后面往前数，奇数个位置的节点背景颜色为黄色。测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 10 的效果

例子 11：

<style>
div {margin:6px;}
#menu1 :nth-of-type(2n){background:yellow;}
#menu2 :nth-of-type(3n+1){background:yellow;}
</style>


<h2>测试1</h2>
<div id="menu1">
  <div>孟宪会之CSS3中文参考一</div>
  <div>孟宪会之CSS3中文参考二</div>
  <div>孟宪会之CSS3中文参考三</div>
  <div>孟宪会之CSS3中文参考四</div>
  <div>孟宪会之CSS3中文参考五</div>
  <div>孟宪会之CSS3中文参考六</div>
  <div>孟宪会之CSS3中文参考七</div>
  <div>孟宪会之CSS3中文参考八</div>
  <div>孟宪会之CSS3中文参考九</div>
  <div>孟宪会之CSS3中文参考十</div>
</div>
<h2>测试2</h2>
<div id="menu2">
  <div>孟宪会之CSS3中文参考一</div>
  <div>孟宪会之CSS3中文参考二</div>
  <div>孟宪会之CSS3中文参考三</div>
  <div>孟宪会之CSS3中文参考四</div>
  <div>孟宪会之CSS3中文参考五</div>
  <div>孟宪会之CSS3中文参考六</div>
  <div>孟宪会之CSS3中文参考七</div>
  <div>孟宪会之CSS3中文参考八</div>
  <div>孟宪会之CSS3中文参考九</div>
  <div>孟宪会之CSS3中文参考十</div>
</div>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 11 的效果

例子 12：

<style>
div {margin:6px;}
#menu1 :nth-last-of-type(3){background:yellow;}
#menu2 :nth-last-of-type(-3n+3){background:yellow;}
</style>


<h2>测试1</h2>
<div id="menu1">
  <div>孟宪会之CSS3中文参考一</div>
  <div>孟宪会之CSS3中文参考二</div>
  <div>孟宪会之CSS3中文参考三</div>
  <div>孟宪会之CSS3中文参考四</div>
  <div>孟宪会之CSS3中文参考五</div>
  <div>孟宪会之CSS3中文参考六</div>
  <div>孟宪会之CSS3中文参考七</div>
  <div>孟宪会之CSS3中文参考八</div>
  <div>孟宪会之CSS3中文参考九</div>
  <div>孟宪会之CSS3中文参考十</div>
</div>
<h2>测试2</h2>
<div id="menu2">
  <div>孟宪会之CSS3中文参考一</div>
  <div>孟宪会之CSS3中文参考二</div>
  <div>孟宪会之CSS3中文参考三</div>
  <div>孟宪会之CSS3中文参考四</div>
  <div>孟宪会之CSS3中文参考五</div>
  <div>孟宪会之CSS3中文参考六</div>
  <div>孟宪会之CSS3中文参考七</div>
  <div>孟宪会之CSS3中文参考八</div>
  <div>孟宪会之CSS3中文参考九</div>
  <div>孟宪会之CSS3中文参考十</div>
</div>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 12 的效果

例子 13：

<style>
div {margin:6px;}
#menu1 :first-child{background:yellow;}
#menu1 :last-child{background:yellow;}
</style>


<h2>测试1</h2>
<div id="menu1">
  <div>孟宪会之CSS3中文参考一</div>
  <div>孟宪会之CSS3中文参考二</div>
  <div>孟宪会之CSS3中文参考三</div>
  <div>孟宪会之CSS3中文参考四</div>
  <div>孟宪会之CSS3中文参考五</div>
  <div>孟宪会之CSS3中文参考六</div>
  <div>孟宪会之CSS3中文参考七</div>
  <div>孟宪会之CSS3中文参考八</div>
  <div>孟宪会之CSS3中文参考九</div>
  <div>孟宪会之CSS3中文参考十</div>
</div>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 13 的效果

例子 14：

<style>
div {margin:6px;}
#menu1 :first-of-type{background:yellow;}
#menu1 :last-of-type{background:yellow;}
</style>

<h2>测试1</h2>
<div id="menu1">
  <div>孟宪会之CSS3中文参考一</div>
  <div>孟宪会之CSS3中文参考二</div>
  <div>孟宪会之CSS3中文参考三</div>
  <div>孟宪会之CSS3中文参考四</div>
  <div>孟宪会之CSS3中文参考五</div>
  <div>孟宪会之CSS3中文参考六</div>
  <div>孟宪会之CSS3中文参考七</div>
  <div>孟宪会之CSS3中文参考八</div>
  <div>孟宪会之CSS3中文参考九</div>
  <div>孟宪会之CSS3中文参考十</div>
</div>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 14 的效果

例子 15：

<style>
div {margin:6px;}
#menu1 :only-of-type{background:yellow;}
#menu2 div:only-of-type{background:yellow;}
</style>

<h2>测试1</h2>
<div id="menu1">
  <div>这里符合:only-of-type</div>
  <font>这里也符合:only-of-type</font>
  <span>这2个不符合 :only-of-type</span>
  <span>这2个不符合 :only-of-type</span>
</div>
<h2>测试2</h2>
<div id="menu2">
  <div>只有div符合:only-of-type</div>
  <span>span不符合 :only-of-type</span>
</div>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 15 的效果

例子 16：

<style>
div {margin:6px;}
#menu1 :empty{border:2px solid red;padding:3px;}
</style>

<h2>测试1</h2>
<div id="menu1">
  <div></div>
  <font>这里也符合:only-of-type</font>
  <span></span>
  <span>这2个不符合 :only-of-type</span>
</div>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 16 的效果

例子 17：

<style>
:default{background:#F00;}
</style>

<form>
<select>
<option>1</option>
<option selected="selected">2</option>
<option>3</option>
</select>
<input type="submit" value="提交" />
<input type="submit" value="提交" />
</form>

测试结果：Firefox 4 支持select和submit按钮，Opera 11在鼠标移动时才有效果，Safari 5，Chrome 10 都支持submit按钮。

点击查看例子 17 的效果

本属性最后更新时间：2011-4-27 10:25:24