CSS - Pseudo Classes

CSS伪类用于向某些选择器添加特殊效果.您不需要使用JavaScript或任何其他脚本来使用这些效果.伪类的简单语法如下 :

selector:pseudo-class {property: value}

CSS类也可以与伪类一起使用 :

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

最常用的伪类如下 :

在< style> ...中定义伪类时阻止，以下几点应注明 : 去;

• a:悬停必须在a:link和a:之后访问CSS定义才能生效.

• a:活动必须在a:hover in CSS定义后才能生效.

• 伪类名称不区分大小写.

• 伪类与CSS类不同但是它们可以合并.

:link伪类

以下示例演示了如何使用:link 类设置链接颜色.可能的值可以是任何有效格式的任何颜色名称.

                  a:link {color:#000000}                  Black Link   

The :visited pseudo-class

以下是演示如何使用:visited类设置访问过的链接的颜色的示例。 可能的值可以是任何有效格式的任何颜色名称。

                  a:visited {color: #006600}                  Click this link   

这将产生以下链接。 单击此链接后，它会将其颜色更改为绿色。

The :hover pseudo-class

下面的示例演示如何使用:hover类在我们将鼠标指针悬停在该链接上时更改链接的颜色。 可能的值可以是任何有效格式的任何颜色名称。

                  a:hover {color: #FFCC00}                  Bring Mouse Here   

它将产生以下链接。 现在，将鼠标悬停在此链接上，您将看到它将颜色更改为黄色。

The :active pseudo-class

以下示例演示如何使用:active类更改活动链接的颜色。 可能的值可以是任何有效格式的任何颜色名称。

                  a:active {color: #FF00CC}                  Click This Link   

它将产生以下链接。 当用户单击它时，颜色变为粉红色。

The :focus pseudo-class

以下示例演示如何使用:focus类更改聚焦链接的颜色。 可能的值可以是任何有效格式的任何颜色名称。

                  a:focus {color: #0000FF}                  Click this Link   

它将产生以下链接。 当此链接聚焦时，其颜色变为橙色。 失去焦点时颜色会变回。

The :first-child  pseudo-class

:first-child伪类匹配作为另一个元素的第一个子元素的指定元素，并为该元素添加特殊样式，该元素是某个其他元素的第一个子元素。

要使:IE中的第一个孩子工作<！DOCTYPE>必须在文档的顶部声明。

例如，要缩进所有

                  div > p:first-child {            text-indent: 25px;         }                     
         
First paragraph in div. This paragraph will be indented
         
Second paragraph in div. This paragraph will not be indented
      
      
But it will not match the paragraph in this HTML:
            
         
Heading
         
The first paragraph inside the div. This paragraph will not be effected.