CSS - Pseudo Classes

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

selector:pseudo-class {property: value}

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

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

最常用的伪类如下 :

Sr.No.Value&说明
1

:link

使用此类为未访问的链接添加特殊样式.

2

:已访问

使用此类为访问链接添加特殊样式.

3

:悬停

当您将鼠标悬停在元素上时,使用此类为元素添加特殊样式.

4

:active

使用此类为活动元素添加特殊样式.

5

:focus

使用此类在元素具有焦点时为元素添加特殊样式.

6

:first-child

使用此类为元素添加特殊样式其他一些孩子的第一个孩子ement.

7

:lang

使用此类指定要在指定元素中使用的语言.

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

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

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

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

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

:link伪类

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

<html>
   <head>
      <style type = "text/css">
         a:link {color:#000000}
      </style>
   </head>

   <body>
      <a href = "">Black Link</a>
   </body>
</html>

The :visited pseudo-class

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

<html>
   <head>
      <style type = "text/css">
         a:visited {color: #006600}
      </style>
   </head>

   <body>
      <a href = "">Click this link</a>
   </body>
</html>

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

The :hover pseudo-class

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

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "">Bring Mouse Here</a>
   </body>
</html>

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

The :active pseudo-class

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

<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>

   <body>
      <a href = "">Click This Link</a>
   </body>
</html>

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

The :focus pseudo-class

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

<html>
   <head>
      <style type = "text/css">
         a:focus {color: #0000FF}
      </style>
   </head>

   <body>
      <a href = "">Click this Link</a>
   </body>
</html>

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

The :first-child  pseudo-class

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

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

例如,要缩进所有<div>元素的第一段,您可以使用此定义:

<html>
   <head>
      <style type = "text/css">
         div > p:first-child {
            text-indent: 25px;
         }
      </style>
   </head>

   <body>
   
      <div>
         <p>First paragraph in div. This paragraph will be indented</p>
         <p>Second paragraph in div. This paragraph will not be indented</p>
      </div>
      <p>But it will not match the paragraph in this HTML:</p>
      
      <div>
         <h3>Heading</h3>
         <p>The first paragraph inside the div. This paragraph will not be effected.</p>
      </div>
      
   </body>
</html>

The :lang pseudo-class

语言伪类:lang允许根据特定标记的语言设置构建选择器。

此类在必须适用于对某些语言结构具有不同约定的多种语言的文档中很有用。 例如,法语通常使用尖括号(<和>)进行引用,而英语使用引号('和')。

在需要解决此差异的文档中,您可以使用:lang伪类来适当地更改引号。 以下代码针对所使用的语言适当更改<blockquote>标记:

<html>
   <head>
      <style type = "text/css">
         
         /* Two levels of quotes for two languages*/
         :lang(en) { quotes: '"' '"'  "'"  "'"; }
         :lang(fr) { quotes: "<<" ">>" "<" ">"; }
      </style>
   </head>
   
   <body>
      <p>...<q lang = "fr">A quote in a paragraph</q>...</p>
   </body>
</html>

:lang选择器将应用于文档中的所有元素。 但是,并非所有元素都使用quotes属性,因此对大多数元素的效果都是透明的。