伪类伪元素 css3_伪类| CSS-蒲公英云

伪类伪元素 css3

These classes are basically used to add special effects to some selectors or in other words, we can say that A pseudo-class is basically used to define a special state of an element.

这些类基本上是用来为某些选择器添加特殊效果的，换句话说，可以说伪类基本上是用来定义元素的特殊状态的。

Through pseudo-classes, we don’t require javascript or any other script for these effects.

通过伪类，我们不需要javascript或任何其他脚本来实现这些效果。

The basic syntax of pseudo-classes as follows:

伪类的基本语法如下：

selector:pseudo-class {property: value}

We can also write it in another way such as follows:

我们还可以用另一种方式编写它，如下所示：

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

The most commonly used pseudo-classes are:

最常用的伪类是：

:link

：链接
:visited

：已访问
:hover

：徘徊
:active

：活性
:focus

：焦点
:first-child

：第一个孩子

When we are defining pseudo classes in between opening and closing style tag following points should be noted.

在打开和关闭样式标签之间定义伪类时，应注意以下几点。

The name of pseudo classes are not case sensitive.

伪类的名称不区分大小写。
These are basically different from CSS classes but then can be combined.

这些基本上与CSS类不同，但是可以合并。
In order to make CSS definition more effective following points should be keep in mind.

为了使CSS定义更有效，请牢记以下几点。
1. a:hover MUST come after a:link and a:visited
2. a:active MUST come after a:hover

Basic Uses of Pseudo-Classes are as follows

伪类的基本用法如下

It can be used to style an element when moves move over it.

当在其上移动时，可用于设置元素的样式。
It can style they visited and unvisited links differently.

它可以使访问和未访问链接的样式不同。
We can style an element when it gets focus.

当元素获得焦点时，我们可以为其设置样式。

Let’s discuss commonly used pseudo classes one by one:

让我们一一讨论常用的伪类：

1. :link

1 .：链接

This is basically used to add special style to an unvisited link. The following example shows how to use the :link class to set the color of link.

基本上，这是用来为未访问的链接添加特殊样式。以下示例显示如何使用：link类设置链接的颜色。

<html>
<head>
    <style type="text/css">
        a:visited {
            color: #FF00FF
        }
    </style>
</head>
<body><a href="">INCLUDEHELP!!!</a>
</body>
</html>

2. :visited

2.：拜访

This is basically used to add style to the previously visited link. The following example shows how to use the :visited class to set the color of previously visited link.

基本上，这是用于向以前访问的链接添加样式。以下示例显示如何使用：visited类设置以前访问的链接的颜色。

<html>
<head>
    <style type="text/css">
        a:visited {
            color: #FF00FF
        }
    </style>
</head>
<body><a href="">INCLUDEHELP</a>
</body>
</html>

3. :hover

3.：悬停

This is basically used to add special style to the element when we move mouse over it. The following example shows how to use the :hover class to change the color of links when mouse moves over it.

当我们将鼠标移到元素上时，这基本上是用来为元素添加特殊样式的。以下示例显示了如何在鼠标移到：hover类时更改链接的颜色。

<html>
<head>
    <style type="text/css">
        a:hover {
            color: #0000FF
        }
    </style>
</head>
<body><a href="">Move Mouse here</a>
</body>
</html>

4. :active

4.：活跃

This class is basically used to add special style to the element that are active. The following example shows how to use the :active class to change the color of all active links.

此类基本上用于向活动的元素添加特殊样式。以下示例显示了如何使用：active类更改所有活动链接的颜色。

<html>
<head>
    <style type="text/css">
        a:active {
            color: #FF00FF
        }
    </style>
</head>
<body><a href="">INCLUDEHELP</a>
</body>
</html>

5. :focus

5.：重点

This class is basically used to add the special style to the element that are focused. The following example shows how to use the :focus class to change the color of the link when it is focused.

此类基本上用于向特殊元素添加特殊样式。下面的示例演示如何使用：focus类在链接处于焦点状态时更改其颜色。

<html>
<head>
    <style type="text/css">
        a:focus {
            color: #FF00FF
        }
    </style>
</head>
<body><a href="">INCLUDEHELP</a>
</body>
</html>

6. :first-child

6.：第一个孩子

This class is basically used to add special style to the element that is the first child of another element.

此类基本上用于向元素添加特殊样式，该元素是另一个元素的第一个子元素。

<html>
<head>
    <style type="text/css">
        div >p:first-child {
            text-indent: 25px;
            color: #FF00FF;
        }
    </style>
</head>
<body>
    <div>
        <p>Here INCLUDEHELP is intendent</p>
        <p>Here INCLUDEHELP is not indented</p>
    </div>
    <p>But this will not change the paragraph in HTML document:
    </p>
    <div>
        <p>Here INCLUDEHELP will not be effected.
        </p>
    </div>
</body>