【从零开始学CSS | 第二篇】伪类选择器

电玩女神 2024-03-17 19:35 49阅读 0赞

![715d527fb56b427db432aa7c5b8c479d.png][]

**目录**

前言：

伪类选择器：

常见的伪类选择器：

举例：

小窍门：

总结:

--------------------

## 前言： ##

上一篇文章我们详细的为大家介绍了一些常见的选择器，这几篇我们将再次介绍CSS中的一个常见选择器——伪类选择器，他的种类繁多，希望各位可以对它有一个比较好的掌握程度。

## 伪类选择器： ##

伪类选择器是CSS中一种用于选择元素的特殊方式，**通过在选择器后面使用冒号(:)和伪类名称的方式来指定。伪类选择器可以选择具有特定状态或条件的元素，而不仅仅是基于标签名或类名等静态的属性选择。**

伪类选择器可以与其他选择器结合使用，用于更精确地选择和应用样式到文档中的不同元素。

> TIPS：  
> 伪类不是类，他只是元素的一种特殊状态，伪类是CSS中强大而灵活的工具，它们使得我们可以根据元素的不同状态和位置来设计更具交互性和动态性的样式。

### 常见的伪类选择器： ###

**1.：hover（悬停状态）**  
**当鼠标悬停在元素上时，可以为元素定义特定的样式。**例如，当鼠标悬停在链接上时，可以改变链接的颜色或背景色：

a:hover {
         color: red;
         background-color: yellow;
       }

**2. :active（激活状态）:**  
 **当元素被激活（例如被点击）时，可以应用特定的样式。**通常在按钮或链接上使用该伪类来给用户提供点击反馈：

button:active {
         background-color: green;
         color: white;
       }

**3. :focus（焦点状态）:**  
 **当元素获得焦点时，可以应用特定的样式。**主要用于表单元素，以便在用户输入时突出显示当前焦点的元素：

input:focus {
         border: 2px solid blue;
       }

**4. :visited（已访问链接）:**  
 **选择已经访问过的链接，并为其设置特定的样式。**这通常用于改变已访问链接的颜色，以便用户可以区分哪些链接已经点击过：

a:visited {
         color: purple;
       }

**5. :first-child（第一个子元素）:**  
 **选择父元素的第一个子元素，并为其设置样式。**这可以用于选择列表中的第一个元素或其他需要突出显示第一个子元素的情况 ：

li:first-child {
         font-weight: bold;
       }

**6. :last-child（最后一个子元素）:**  
 **选择父元素的最后一个子元素，并为其设置样式。**这可以用于选择列表中的最后一个元素或其他需要突出显示最后一个子元素的情况：

li:last-child {
         margin-bottom: 0;
       }

**7. :nth-child(n)（第n个子元素）:**  
 **选择父元素中特定位置的子元素，并为其设置样式。**可以使用这个伪类选择器根据子元素的位置来应用样式，其中n是一个表示位置的数值：

p:nth-child(2) {
         color: blue;
       }

上述示例将选择父元素中的第二个\`<p>\`元素并将其文本颜色设置为蓝色。

### 举例： ###

例如我们建立一个a标签，我们都知道如果**a标签访问后就会变为紫色，未访问的时候是蓝色**，此时**如果我们想要a标签未访问的时候是红色**，**访问了就是正常的紫色**。我们之前学的知识就无法办到！

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
    
              a{
                color: red;
              }
            
      </style>
    </head>
    <body>
    
      <a href="https://www.bilibili.com/" target="_blank">去哔哩哔哩</a>
    </body>
    </html>

结果：

![609d82cb6c724f84bf5ae7c59917f31e.png][]我们发现我们有没有对这个链接进行访问，”去哔哩哔哩“这个文本不管是否访问过始终都是红色，并不能够达到我们之前想要的结果，因此我们引入了伪类选择器这个概念，使用伪类选择器来选择具有特定状态或条件的元素。

正确写法：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            /* 选中的是没有访问过的A */
              a:link{
                color: red;
              }
            
      </style>
    </head>
    <body>
    
      <a href="https://www.bilibili.com/" target="_blank">去哔哩哔哩</a>
    </body>
    </html>

访问前：  
![7e008537f8b4406db9d37f0d51dd3bcb.png][]

访问后：

![55dc4e9a920a4047ba2b9dc44930439f.png][]

### 小窍门： ###

当我们伪类选择器对a标签进行修饰的时候，我们一般都有固定的顺序，分别是link->visited->hover->active

这是因为这个顺序可以确保样式规则被正确地应用。

*  :link 伪类选择器应用于未被访问过的链接，它指定了默认状态下的链接样式。**这个伪类通常放在第一个，是因为它是最基本的状态，应该首先定义默认样式。**
 *  :visited 伪类选择器应用于已被访问过的链接，它指定了访问后链接的样式。**它紧随\`:link\`之后，因为这两个伪类选择器是针对同一个元素的不同状态。**
 *  :hover 伪类选择器应用于当鼠标悬停在链接上时的状态，它指定了鼠标悬停时链接的样式。它排在前面是因为悬停状态有时是用户与链接进行交互的重要状态。
 *  :active 伪类选择器应用于当链接被激活（例如鼠标按下或按键按下时）时的状态，它指定了被激活时链接的样式。**它通常排在最后，因为它代表的是链接的瞬时状态，用户交互完成后不再保留。**

按照这个顺序编写样式规则，可以确保链接的样式按照预期的方式应用。此外，这个顺序也符合一般的使用习惯和开发者约定，有助于代码的可读性和维护性。

**如果不按照这个顺序来对a标签进行状态修饰，可能会导致有些修饰无法正常出现。**

例如：

我们想要a标签鼠标悬停的时候是红色，鼠标点击的时候是绿色，就应该严格遵守这个顺序：将hover 排在 active前面：

a:hover{
                color: red;
              }
              
              a:active{
                color: darkgreen;
              }

如果颠倒顺序的话， 则当标签处于激活状态的时候，并不会显示绿色。

**需要注意的是，并不是所有的伪类选择器都必须按照这个顺序进行排列。这个顺序更适用于\`a\`标签的伪类选择器，针对其他元素的伪类选择器可能有不同的顺序约定。**

## 总结: ##

本章节我们详细的介绍了伪类选择器，它使我们能够特定的对标签的不同状态进行修饰，是一个很实用的选择器，但同时它的种类也很繁多，因此我们要多加记忆。

如果我的内容对你有帮助，请**点赞，评论，收藏**。创作不易，大家的支持就是我坚持下去的动力！

![69e9169c980f43e0aad31ff9ada88a9c.png][]

[715d527fb56b427db432aa7c5b8c479d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/6e7e49f20b7d4ade954688515adba328.png
[609d82cb6c724f84bf5ae7c59917f31e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/95f203dcedbc4127b5a2542aab1fee0c.png
[7e008537f8b4406db9d37f0d51dd3bcb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/6e941d620eec4a8fb0c0ccb4fa329472.png
[55dc4e9a920a4047ba2b9dc44930439f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/3dd1b591d3284bab95ecb7779ff3cd44.png
[69e9169c980f43e0aad31ff9ada88a9c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/10d3412cef7446f4bbbcf1a4c4cb4065.png