伪类（Pseudo Classes）

优质

小牛编辑

130浏览

2023-12-01

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

selector:pseudo-class {property: value}

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

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

最常用的伪类如下 -

Sr.No.	价值和描述
1	:link 使用此类可以为未访问的链接添加特殊样式。
2	:visited 使用此类可以为访问链接添加特殊样式。
3	:hover 将鼠标悬停在元素上时，可以使用此类为元素添加特殊样式。
4	:active 使用此类可以向活动元素添加特殊样式。
5	:focus 当元素具有焦点时，使用此类为元素添加特殊样式。
6	:first-child 使用此类可以向作为某个其他元素的第一个子元素的元素添加特殊样式。
7	:lang 使用此类指定要在指定元素中使用的语言。

在 ... 块中定义伪类时，应注意以下几点 -

a:hover必须在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>

它将产生以下黑色链接 -

:访问伪类

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

<html>
   <head>
      <style type = "text/css">
         a:visited {color: #006600}
      </style>
   </head>
   <body>
      <a href = "">Click this link</a>
   </body>
</html>

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

:hover伪类

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

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>
   <body>
      <a href = "">Bring Mouse Here</a>
   </body>
</html>

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

:active伪类

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

<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>
   <body>
      <a href = "">Click This Link</a>
   </body>
</html>

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

:焦点伪类

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

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

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

:first-child伪类

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

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

例如，要缩进所有

元素的第一段，您可以使用此定义 -

<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>

:lang伪类

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

此类在必须吸引多种语言的文档中非常有用，这些语言对于某些语言结构具有不同的约定。例如，法语通常使用尖括号（）进行引用，而英语则使用引号（'和'）。

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

标记 -

<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属性，因此对大多数元素的效果都是透明的。