CSS 伪类 (Pseudo-classes)

📌 相关文章

📜 CSS 伪类 (Pseudo-classes)

📅 最后修改于: 2020-11-05 02:18:51 🧑 作者: Mango

CSS　伪类

伪类可以定义为关键字，该关键字将与选择器结合在一起，该选择器定义所选元素的特殊状态。它被添加到选择器中，用于根据其状态向现有元素添加效果。例如，当用户将光标移到元素上时，“：hover”用于为元素添加特殊效果。

伪类的名称不区分大小写。

句法

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

selector: pseudo-class {
  property: value;
}

尽管存在各种CSS伪类，但在这里我们将讨论一些最常用的伪类。广泛使用的CSS类的列表如下：

pseudo-class	Description
:active	IIt is used to add style to an active element.
:hover	IIt adds special effects to an element when the user moves the mouse pointer over the element.
:link	IIt adds style to the unvisited link.
:visited	IIt adds style to a visited link.
:lang	IIt is used to define a language to use in a specified element.
:focus	IIt selects the element which is focused by the user currently.
:first-child	It adds special effects to an element, which is the first child of another element.

让我们讨论上面的伪类以及一个示例。

：hover伪类

当用户将光标移到元素上时，此伪类将特殊样式添加到元素上。如果要使其生效，则必须在“：link”和“：visited”伪类之后应用它。

例


   
      
   

   
      Hello world 
      This is an example of :hover pseudo class

：active伪类

单击或激活元素时适用。它选择激活的元素。

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

例

 
 
 
     
 
  
 
    Hello World 
    The :active pseudo-class 
    Click the following link to see the effect
    Click the link

：访问伪类

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

例

 
 
 
     
 
  
 
    Hello World 
    The :visited pseudo-class 
    Click the following link to see the effect
    Click the link

：lang伪类

在需要多种语言的文档中很有用。它允许我们为不同的语言定义特殊的规则。

例

在此示例中，我们指定p：lang(fr)来选择具有lang =“ fr”属性的元素。


 
  
    
 

  
  Without :lang pseudo class
  With :lang pseudo class with the value fr

：focus伪类

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

例



  
 
  
    Name:

：第一个孩子伪类

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

注意：我们必须声明一个在文档顶部，使“：first-child”伪类可在IE8及其早期版本中使用。

下图更清楚地说明了这一点。

例



   
      
   

   
   
      
         It is the first heading in div. It will be indented, and its color will be blue.
         It is the Second heading in div, which will not be affected.

简单的工具提示悬停

当用户将光标移到元素上时，工具提示会指定有关某些内容的额外信息。让我们使用“：hover”伪类创建一个工具提示。

例







Move your mouse to the below text to see the effect 
Hello World
  Welcome to the javaTpoint

CSS类和伪类

CSS中的类可以与伪类组合。我们可以将其写为-

句法

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

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

例







CSS Classes and pseudo-classes
Move your cursor to the below text
Hello World