# 所有 CSS 伪类、元素

# CSS 伪类

CSS 伪类是用来添加一些选择器的特殊效果。

# 语法

伪类的语法：

selector:pseudo-class {property:value;}

CSS 类也可以使用伪类：

selector.class:pseudo-class {property:value;}

# anchor 伪类

在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

实例

a:link {color:#FF0000;} /* 未访问的链接 */

a:visited {color:#00FF00;} /* 已访问的链接 */

a:hover {color:#FF00FF;} /* 鼠标划过链接 */

a:active {color:#0000FF;} /* 已选中的链接 */

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

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

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

# 伪类和 CSS 类

伪类可以与 CSS 类配合使用：

a.red:visited {

    color:#FF0000;

}

<a class="red" href="css-syntax.html">CSS 语法</a>

如果在上面的例子的链接已被访问，它会显示为红色。

# :first-child 伪类

您可以使用 :first-child 伪类来选择父元素的第一个子元素。

** 注意：** 在 IE8 的之前版本必须声明 <!DOCTYPE> ，这样 :first-child 才能生效。

# 匹配第一个 <p> 元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的 <p> 元素：

实例

p:first-child {    

    color:blue;

}

# 匹配所有 <p> 元素中的第一个 <i> 元素

在下面的例子中，选择相匹配的所有 <p> 元素的第一个 <i> 元素：

实例

p > i:first-child {    

    color:blue;

}

# 匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素

在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：

实例

p:first-child i {    

    color:blue;

}

# :lang 伪类

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

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

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

实例

q:lang(no) {

    quotes: "~" "~";

}

# CSS 伪元素

CSS 伪元素是一种特殊的选择器，它可以在不改变 HTML 结构的情况下对页面元素的特定部分进行样式设置。

CSS 伪元素是用来添加一些选择器的特殊效果。

常用的 CSS 伪元素有 ::before 、 ::after 、 ::first-line 、 ::first-letter 等。

# 语法

伪元素的语法：

selector::pseudo-element {

    property: value;

}

CSS 类也可以使用伪元素：

selector.class::pseudo-element {

    property: value;

}

# :first-line 伪元素

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

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

实例

p:first-line 
{
    color:#ff0000;
    font-variant:small-caps;
}

注意："first-line" 伪元素只能用于块级元素。

注意： 下面的属性可应用于 "first-line" 伪元素：

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

# :first-letter 伪元素

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

实例

p:first-letter 
{
    color:#ff0000;
    font-size:xx-large;
}

注意： "first-letter" 伪元素只能用于块级元素。

注意： 下面的属性可应用于 "first-letter" 伪元素：

• font properties
• color properties
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if "float" is "none")
• text-transform
• line-height
• float
• clear

# 伪元素和 CSS 类

伪元素可以结合 CSS 类：

p.article:first-letter {color:#ff0000;}

<p class="article">文章段落</p>

上面的例子会使所有 class 为 article 的段落的首字母变为红色。

# 多个伪元素

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

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

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

实例

p:first-letter

{

    color:#ff0000;

    font-size:xx-large;

}

p:first-line 

{

    color:#0000ff;

    font-variant:small-caps;

}

# :before 伪元素

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

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

实例

h1:before 

{

    content:url(smiley.gif);

}

# :after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容。

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

实例

h1:after

{

    content:url(smiley.gif);

}