CSS 伪类

2025年3月26日 | 6分钟阅读

什么是伪类？

伪类可以定义为一个关键字，它与选择器组合，用于定义选中元素的特殊状态。它被添加到选择器中，以便根据元素的特殊状态为其添加特殊效果。例如，":hover" 用于在用户将鼠标悬停在元素上时为元素添加特殊效果。

伪类是 CSS 中独特的关键字，它们根据元素的位置或用户交互来定位状态或元素。它们使您能够仅使用标准的类 ID 选择器来设置无法访问的元素的样式。

注意：伪类名称不区分大小写。

语法

伪类以冒号（:）开头。让我们看看它的语法。

selector: pseudo-class {
  property: value;
}

关键字后面跟一个冒号，表示伪类。以下是一些流行的伪类

:active: 当用户激活一个元素时（例如点击按钮）应用样式。
:hover: 当鼠标指针悬停在元素上时应用样式。
:focus: 当一个元素获得焦点时，例如在选择输入字段时，将应用 :focus 样式属性。
:first-child: 选择其父元素的第一个子元素；last-child - 选择其父元素的最后一个子元素；visited - 为用户已访问的链接应用样式。
:nth-last-child(n): 使用 :nth-child(n) 函数选择符合特定数字模式的元素，例如每第二个或第三个子元素。
:nth-of-type(n): 选择符合预定数字模式的特定类型的元素。
:nth-last-of-type(n): 它选择与数字模式匹配的特定类型的元素，从末尾开始计数。:nth-last-child(n) 选择与特定数字模式匹配的元素，从末尾开始。

CSS 中还有许多其他伪类，以上仅列举了部分示例。伪类是有效的工具，可让您根据元素的特定状态或位置来定位和设置样式，从而提高网页的视觉吸引力和交互性。

让我们结合示例讨论上述伪类。

:hover 伪类

此伪类在用户将鼠标悬停在元素上时为元素添加特殊样式。如果想使其生效，必须将其放在 ":link" 和 ":visited" 伪类之后。

示例

<html>
   <head>
      <style>
         body{
	 text-align:center;
	 }
	 h1:hover{
	 color:red;
	 }
	 h2:hover{
	 color:blue;
	 }
      </style>
   </head>

   <body>
      <h1>Hello world </h1>
	  <h2>This is an example of :hover pseudo class</h2>
   </body>
</html>

:active 伪类

当元素被点击或激活时应用。它会选中被激活的元素。

我们可以通过下面的示例来理解它。

示例

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
	body{
	text-align:center;
	}
    a:active{ 
        color: yellow; 
    } 
    h1, h2, h3{ 
        color:red; ; 
    } 
    </style> 
</head> 
  
<body> 
    <h1>Hello World</h1> 
    <h2>The :active pseudo-class</h2> 
	<h3>Click the following link to see the effect</h3>
    <a href="#">Click the link</a>
</body> 
</html>

:visited 伪类

它选择已访问的链接并为其添加特殊样式。其可能的值可以是任何有效格式的颜色名称。

示例

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
	body{
	text-align:center;
	}
    a:visited{ 
        color: red; 
    } 

    </style> 
</head> 
  
<body> 
    <h1>Hello World</h1> 
    <h2>The :visited pseudo-class</h2> 
	<h3>Click the following link to see the effect</h3>
    <a href="#">Click the link</a>
</body> 
</html>

:lang 伪类

它对于需要多种语言的文档很有帮助。它允许我们为不同的语言定义特殊的规则。

示例

在此示例中，我们指定 p:lang(fr)，它选择具有属性 lang="fr" 的元素。

<!DOCTYPE HTML>
 <html>
  <head>
    <style>
	body{
	text-align:center;
	}
       p:lang(fr)
    {
        font-family:Verdana;
        color:blue;
		
    }
   </style>
 </head>
<body>
  
  <p>Without :lang pseudo class</p>
  <p lang="fr">With :lang pseudo class with the value fr</p>
</body>
</html> 

:focus 伪类

它选择用户当前正在聚焦的元素。它通常用于表单的输入元素，并在用户单击时触发。

示例

<!DOCTYPE HTML>
<html>
  <style>
  form{
  text-align:center;
  }
  input:focus{
         border:5px solid lightblue;
         box-shadow:10px 10px 10px black;
         color: blue;
         width:300px;
		 }
   </style>
 <body>
  <form>
    <h1>Name: <input type="text" value="Enter your name"></h1>
   </form>
</body>
</html>

:first-child 伪类

它匹配一个特定元素，该元素是另一个元素的第一个子元素，并为相应的元素添加特殊效果。

注意：为了使 ":first-child" 伪类在 IE8 及其早期版本中生效，我们必须在文档顶部声明 <!DOCTYPE>。

以下插图更清晰地解释了这一点。

示例

<!DOCTYPE HTML>
<html>
   <head>
      <style>
          h1:first-child {
            text-indent: 200px;
	color:blue;
         }
      </style>
   </head>

   <body>
   
      <div>
         <h1>It is the first heading in div. It will be indented, and its color will be blue.</h1>
         <h1>It is the Second heading in div, which will not be affected.</h1>
      </div>
   </body>
</html>

简单的工具提示悬停效果

工具提示会在用户将鼠标悬停在元素上时显示有关该元素的额外信息。让我们通过使用 ":hover" 伪类来创建一个工具提示。

示例

<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
h2{
  display: none;
  background-color: red;
  color:white;
  padding: 20px;
}
div{
font-size:40px;
}
div:hover h2 {
  display: block;
}
</style>
</head>
<body>
<h1>Move your mouse to the below text to see the effect</h1> 
<div>Hello World
  <h2>Welcome to the javaTpoint</h2>
</div>

</body>
</html>

CSS 类和伪类

CSS 中的类可以与伪类结合使用。我们可以这样写：

语法

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

我们可以通过以下示例来理解它。

示例

<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
div.hello:hover {
  color: red;
  font-size:40px;
} 
</style>
</head>
<body>
<h1>CSS Classes and pseudo-classes</h1>
<h2>Move your cursor to the below text</h2>
<div class="hello">Hello World</p>

</body>
</html>

为什么我们在 CSS 中使用伪类？

CSS 伪类用于根据情况或状态选择和设置元素的样式。它们提供了一种使用标准类或 ID 选择器为无法访问的元素应用样式的方法。伪类在 CSS 中常用于以下原因：

增强交互性：伪类允许您根据用户操作（例如悬停、选择或聚焦输入字段）来设置元素的样式。这样做可以增强您的网站或应用程序的交互性，并提供视觉反馈。
设置特定元素的样式：伪类可以根据它们的位置或特征来定位一组大型元素中的特定元素。例如，您可以仅定位已访问的链接，设置父元素的第一个或最后一个子元素的样式，或根据元素的索引选择元素。
设置表单元素的样式：伪类对于设置表单元素的样式非常有用。当输入字段获得焦点或处于特定状态（例如选中或禁用）时，您可以为它们设置样式。通过这种方式，您可以设计出既美观又用户友好的表单。
添加动态效果：要为您的网站添加动态效果，请将伪类与 JavaScript、动画和过渡结合使用。例如，当单击某个元素时，您可以为其外观添加工具提示动画，或者当鼠标悬停在按钮上时更改其背景颜色。
增强可访问性：通过为依赖辅助技术的用户提供视觉线索和反馈，伪类可以帮助提高您网站的可访问性。通过为表单元素的 :focus 状态设置样式，您可以简化键盘用户的操作，让他们更容易确定当前聚焦的元素。

CSS 伪类的局限性

以下是 CSS 伪类的局限性：

功能有限：伪类具有预定义的行为，用于定位元素的特定条件或状态。它们可能无法为您提供复杂交互或样式需求所需的自定义或控制。在这些情况下，可能需要 JavaScript 或其他方法来实现所需的功能。
对旧浏览器的支持不足：尽管大多数现代浏览器都支持伪类，但某些旧版本浏览器可能仅部分支持一些较新或不太常用的伪类。为了确保行为一致，考虑跨浏览器兼容性并在各种浏览器版本中测试您的 CSS 代码至关重要。
缺乏动态选择：元素的初始状态或属性决定了伪类。它们不会响应 DOM 更改或用户交互而自动更新。例如，如果您动态地将元素添加到页面或从页面中删除元素，伪类可能不会正确应用或删除样式。通常由 JavaScript 或其他脚本语言处理动态选择和样式。
层叠和特异性注意事项：伪类具有特异性规则，有时会与其他 CSS 规则冲突。如果您使用多个选择器通过各种伪类来定位同一元素，您可能会遇到干扰预期样式的特异性问题。通过正确理解 CSS 特异性并组织您的样式，您可以减轻这种限制。

下一个主题CSS 伪元素

← 上一个下一个 →

CSS 伪类

什么是伪类？

注意：伪类名称不区分大小写。

语法

:hover 伪类

示例

:active 伪类

示例

:visited 伪类

示例

:lang 伪类

示例

:focus 伪类

示例

:first-child 伪类

注意：为了使 ":first-child" 伪类在 IE8 及其早期版本中生效，我们必须在文档顶部声明 <!DOCTYPE>。

示例

简单的工具提示悬停效果

示例

CSS 类和伪类

语法

示例

为什么我们在 CSS 中使用伪类？

CSS 伪类的局限性

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS 伪类

什么是伪类？

注意：伪类名称不区分大小写。

语法

:hover 伪类

示例

:active 伪类

示例

:visited 伪类

示例

:lang 伪类

示例

:focus 伪类

示例

:first-child 伪类

注意：为了使 ":first-child" 伪类在 IE8 及其早期版本中生效，我们必须在文档顶部声明 <!DOCTYPE>。

示例

简单的工具提示悬停效果

示例

CSS 类和伪类

语法

示例

为什么我们在 CSS 中使用伪类？

CSS 伪类的局限性

相关帖子

CSS 2D Transforms

CSS Animation

CSS Gradient

CSS translate

CSS z-index

CSS @Media Query

CSS radial-gradient

CSS units

CSS User Interface

CSS FlexBox

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器