CSS(13)CSS 伪类(Pseudo-classes)(CSS (13) pseudo classes)

CSS伪类

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

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

所有CSS伪类

  • :active : 向被激活的元素添加样式。
  • :focus : 向拥有键盘输入焦点的元素添加样式。
  • :hover : 当鼠标悬浮在元素上方时,向元素添加样式。
  • :link : 向未被访问的链接添加样式。
  • :visited : 向已被访问的链接添加样式。
  • :first-child : 向元素的第一个子元素添加样式。
  • :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 pseudo class

< strong > pseudo class < / strong > is used to add some special effects of selectors.

< strong > pseudo class
The selection of elements is based on the current state of the element, or the current characteristics of the element, rather than the static flags such as ID, class and attribute of the element. Because the state changes dynamically, when an element reaches a specific state, it may get the style of a pseudo class; When the state changes, it will lose this style again. It can be seen that its function is somewhat similar to that of class, but it is based on abstraction outside the document, so it is called pseudo class.

< strong > all CSS pseudo classes < / strong >

  • : active: adds a style to the active element.
  • : focus: adds a style to an element that has keyboard input focus.
  • : hover: adds a style to an element when the mouse hovers over it.
  • : link: add styles to links that are not accessed.
  • : visited: add styles to links that have been accessed.
  • : first child: adds a style to the first child element of the element.
  • : Lang: adds a style to the element with the specified lang attribute.

1、 Grammar

Syntax of pseudo class:

    selector:pseudo-class {property:value;}

CSS classes can also use pseudo classes:

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

2、 Anchor pseudo class

In browsers that support CSS, different states of links can be displayed in different ways

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

Try it

< strong > note: < / strong > in CSS definition, a: hover must be placed after a: link and a: visited to be valid. a: Active must be placed
a: After hover, it is effective.

< strong > note: < / strong > pseudo class names are case insensitive.

Pseudo class and CSS class

Pseudo classes can be used with CSS classes:

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

If the link in the above example has been accessed, it will be displayed in red.

三、CSS :first-child 伪类

You can use the: first child pseudo class to select the first child of the parent element.

< strong > note: < / strong > the previous version of IE8 must be declared so that first child can take effect.

< strong > (1) match the first < strong > element < / strong > < / strong >

In the following example, the selector matches the element that is the first child of any element:

    p:first-child
    {
        color:blue;
    }

Try it

< strong > (2) match the first element of all elements < / strong >

In the following example, select the first element of all matching elements:

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

Try it

< strong > (3) match all elements in all elements as the first child element < / strong >

In the following example, the selector matches all elements in all elements that are the first child of the element:

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

Try it

四、CSS – :lang 伪类

: Lang pseudo classes give you the ability to define special rules for different languages

Note: IE8 must be declared to support; Lang pseudo class.

In the following example, the Lang class defines the type of quotation marks for the Q element whose attribute value is no:

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

Try it