标签：13 伪类 color 元素 classes child CSS first

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: "~" "~";}

尝试一下 »

标签：13,伪类,color,元素,classes,child,CSS,first
来源： https://www.cnblogs.com/springsnow/p/16266344.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。