脚本宝典收集整理的这篇文章主要介绍了CSS（13）CSS 伪类(Pseudo-classes)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

CSS伪类

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

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

所有CSS伪类

1. :active ： 向被激活的元素添加样式。
2. :focus ： 向拥有键盘输入焦点的元素添加样式。
3. :hover ： 当鼠标悬浮在元素上方时，向元素添加样式。
4. :link ： 向未被访问的链接添加样式。
5. :visited ： 向已被访问的链接添加样式。
6. :first-child ： 向元素的第一个子元素添加样式。
7. :lang ： 向带有指定 lang 属性的元素添加样式。

一、语法

伪类的语法：

    selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

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

二、锚伪类

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

    a:link {color:#FF0000;} /* 未访问的链接 */
    a:visited {color:#00FF00;} /* 已访问的链接 */
    a:hover {color:#FF00FF;} /* 鼠标划过链接 */
    a:active {color:#0000FF;} /* 已选中的链接 */

尝试一下 »

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

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

伪类和CSS类

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

    a.red:visited {color:#FF0000;}
    [CSS 语法](css-syntax.html)

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

三、CSS :first-child 伪类

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

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

（1）匹配第一个 元素

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

    p:first-child
    {
        color:blue;
    }

尝试一下 »

（2）匹配所有元素中的第一个 元素

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

    p > i:first-child
    {
        color:blue;
    }

尝试一下 »

（3）匹配所有作为第一个子元素的元素中的所有元素

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

    p:first-child i
    {
        color:blue;
    }

尝试一下 »

四、CSS - :lang 伪类

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

注意：IE8必须声明才能支持;lang伪类。

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

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

尝试一下 »

脚本宝典总结

以上是脚本宝典为你收集整理的CSS（13）CSS 伪类(Pseudo-classes)全部内容，希望文章能够帮你解决CSS（13）CSS 伪类(Pseudo-classes)所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。