css中的伪类与伪元素

桃扇骨 2021-09-15 06:14 452阅读 0赞

a:link   {

}      /* 未访问链接*/

a:visited {

}/* 已访问链接 */

a:hover {

}  /* 鼠标移动到链接上 */

a:active {

}  /* 鼠标点击时 */

**注意：** 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

**注意：** 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

**注意：**伪类的名称不区分大小写。

![70][]

## CSS - :first - child伪类 ##

![70 1][]

## 匹配所有 元素中的第一个 元素 ##

![70 2][]

![70 3][]

## 匹配所有作为第一个子元素的 元素中的所有 元素 ##

![70 4][]

![70 5][]

## CSS - :lang 伪类 ##

:lang 伪类使你有能力为不同的语言定义特殊的规则

**注意：**IE8必须声明[<!DOCTYPE>][DOCTYPE]才能支持;lang伪类。

在下面的例子中，:lang 类为属性值为 no 的q元素定义引号的类型：

## 实例 ##

q :lang ( no )  \{  quotes:  "~" "~"  ; \}

![70 6][]

a.one:link \{color:\#ff0000;\} 
未访问 
a.one:visited \{color:\#0000ff;\} 
以访问 
a.one:hover \{color:\#ffcc00;\} 
鼠标移入 
 
 
a.two:link \{color:\#ff0000;\} 
a.two:visited \{color:\#0000ff;\} 
a.two:hover \{font-size:150%;\} 
字体大小 
 
 
a.three:link \{color:\#ff0000;\} 
a.three:visited \{color:\#0000ff;\} 
a.three:hover \{background:\#66ff66;\} 
背景颜色 
 
 
a.four:link \{color:\#ff0000;\} 
a.four:visited \{color:\#0000ff;\} 
a.four:hover \{font-family:Georgia, serif;\} 
字体样式 
 
 
a.five:link \{color:\#ff0000;text-decoration:none;\} 
a.five:visited \{color:\#0000ff;text-decoration:none;\} 
a.five:hover \{text-decoration:underline;\} 
取消下滑线 
</style> 
</head> 
 
 
<body> 
将鼠标移至链接上改变样式. 
 
 
<a class="one" href="/css/" target="\_blank">这个链接改变颜色</a> 
<a class="two" href="/css/" target="\_blank">这个链接改变字体大小</a> 
<a class="three" href="/css/" target="\_blank">这个链接改变背景颜色</a> 
<a class="four" href="/css/" target="\_blank">这个链接改变字体类型</a>

<a class="five" href="/css/" target="\_blank">这个链接改变文字修饰</a>

## 所有CSS伪类/元素 ##

<table style="border:0px;margin:4px 0px;padding:0px;width:729.091px;color:rgb(51,51,51);font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;font-size:12px;background-color:rgb(255,255,255);"> 
 <tbody style="margin:0px;padding:0px;"> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
 <th align="left" style="border-color:rgb(85,85,85);margin:0px;padding:3px;font-size:12px;color:rgb(255,255,255);background-color:rgb(85,85,85);vertical-align:top;">选择器</th> 
 <th align="left" style="border-color:rgb(85,85,85);margin:0px;padding:3px;font-size:12px;color:rgb(255,255,255);background-color:rgb(85,85,85);vertical-align:top;">示例</th> 
 <th align="left" style="border-color:rgb(85,85,85);margin:0px;padding:3px;font-size:12px;color:rgb(255,255,255);background-color:rgb(85,85,85);vertical-align:top;">示例说明</th> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(255,255,255);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-checked.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:checked</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">input:checked</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择所有选中的表单元素</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/css/cssref/sel-disabled.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:disabled</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">input:disabled</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择所有禁用的表单元素</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(255,255,255);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-empty.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:empty</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">p:empty</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择所有没有子元素的p元素</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-enable.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:enabled</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">input:enabled</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择所有启用的表单元素</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(255,255,255);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-first-of-type.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:first-of-type</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">p:first-of-type</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择每个父元素是p元素的第一个p子元素</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-in-range.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:in-range</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">input:in-range</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择元素指定范围内的值</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(255,255,255);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-invalid.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:invalid</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">input:invalid</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择所有无效的元素</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-last-child.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:last-child</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">p:last-child</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择所有p元素的最后一个子元素</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(255,255,255);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-last-of-type.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:last-of-type</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">p:last-of-type</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择每个p元素是其母元素的最后一个p元素</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-not.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:not(selector)</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">:not(p)</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择所有p以外的元素</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(255,255,255);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-nth-child.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:nth-child(n)</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">p:nth-child(2)</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择所有p元素的第二个子元素</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-nth-last-child.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:nth-last-child(n)</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">p:nth-last-child(2)</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择所有p元素倒数的第二个子元素</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(255,255,255);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-nth-last-of-type.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:nth-last-of-type(n)</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">p:nth-last-of-type(2)</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择所有p元素倒数的第二个为p的子元素</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-nth-of-type.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:nth-of-type(n)</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">p:nth-of-type(2)</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择所有p元素第二个为p的子元素</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(255,255,255);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-only-of-type.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:only-of-type</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">p:only-of-type</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择所有仅有一个子元素为p的元素</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-only-child.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:only-child</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">p:only-child</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择所有仅有一个子元素的p元素</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(255,255,255);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-optional.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:optional</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">input:optional</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择没有"required"的元素属性</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-out-of-range.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:out-of-range</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">input:out-of-range</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择指定范围以外的值的元素属性</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(255,255,255);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-read-only.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:read-only</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">input:read-only</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择只读属性的元素属性</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-read-write.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:read-write</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">input:read-write</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择没有只读属性的元素属性</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(255,255,255);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-required.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:required</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">input:required</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择有"required"属性指定的元素属性</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-root.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:root</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">root</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择文档的根元素</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(255,255,255);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-target.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:target</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">#news:target</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择当前活动#news元素(点击URL包含锚的名字)</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-valid.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:valid</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">input:valid</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择所有有效值的属性</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(255,255,255);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-link.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:link</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">a:link</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择所有未访问链接</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-visited.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:visited</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">a:visited</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择所有访问过的链接</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(255,255,255);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-active.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:active</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">a:active</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择正在活动链接</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-hover.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:hover</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">a:hover</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">把鼠标放在链接上的状态</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(255,255,255);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-focus.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:focus</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">input:focus</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择元素输入后具有焦点</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-firstletter.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:first-letter</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">p:first-letter</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择每个&lt;p&gt; 元素的第一个字母</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(255,255,255);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-firstline.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:first-line</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">p:first-line</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择每个&lt;p&gt; 元素的第一行</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-firstchild.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:first-child</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">p:first-child</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">选择器匹配属于任意元素的第一个子元素的 &lt;p&gt; 元素</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(255,255,255);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-before.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:before</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">p:before</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">在每个&lt;p&gt;元素之前插入内容</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-after.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:after</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">p:after</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">在每个&lt;p&gt;元素之后插入内容</td> 
 </tr> 
 <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(255,255,255);"> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/cssref/sel-lang.html" style="border:0px;margin:0px;padding:0px;font-size:12px;background-color:rgb(255,255,255);" rel="nofollow">:lang(language)</a></td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">p:lang(it)</td> 
 <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">为&lt;p&gt;元素的lang属性选择一个开始值</td> 
 </tr> 
 </tbody> 
</table>

\------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

伪元素

## :first-line 伪元素 ##

"first-line" 伪元素用于向文本的首行设置特殊样式。

在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：

## :first-letter 伪元素 ##

##  ##

"first-letter" 伪元素用于向文本的首字母设置特殊样式：

## 多个伪元素 ##

可以结合多个伪元素来使用。

在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。

段落中的其余文本将以默认字体大小和颜色来显示：

## CSS - :before 伪元素 ##

":before" 伪元素可以在元素的内容前面插入新内容。

下面的例子在每个 <h1>元素前面插入一幅图片：

p:first-letter

\{ 
color:\#ff0000; 
font-size:xx-large; 
\} 
p:first-line  
\{ 
color:\#0000ff; 
font-variant:small-caps; 
\} 
</style> 
</head> 
 
 
<body> 
你可以结合使用"first-line"和"first-letter"伪元素向文本的首行和首字母

设置特殊样式。

![70 7][]

h1:before \{content:url(smiley.gif);\} 
</style> 
</head> 
 
 
<body> 
<h1>This is a heading</h1> 
The :before pseudo-element inserts content before an element. 
<h1>This is a heading</h1>

注意:仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性

![70 8][]

## 所有CSS伪类/元素 ##

**伪类**选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

与伪类针对特殊状态的元素不同的是，**伪元素**是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

[70]: /images/20210813/09137772378d4e0baff53d38456237ad.png
[70 1]: /images/20210813/a06d2070a19749cfacbd754338168fc4.png
[70 2]: /images/20210813/a74b9f50d2b54ed5bae04614267a6082.png
[70 3]: /images/20210813/16a7826da527415f8cf0918c98c6a43d.png
[70 4]: /images/20210813/c6b55cb72b93446a90bf2be164d4756e.png
[70 5]: /images/20210813/5de9d92d6db04e0eaec9d5763afa5591.png
[DOCTYPE]: http://www.runoob.com/tags/tag-doctype.html
[70 6]: /images/20210813/776efc26b4aa4033b0bf1da9784ea56f.png
[70 7]: /images/20210813/a703336c4a004976929cf6846091f034.png
[70 8]: /images/20210813/4f45d2ffb9374e80aafdc87e72c8f7ce.png