【CSS】CSS 伪类和伪元素

红太狼 2023-02-15 15:54 47阅读 0赞

### 目录 ###

*   *   *  1. 什么是伪类和伪元素？
         *   *  1.1 伪类
             *  1.2 伪元素
         *  2. 伪类和伪元素的使用场景？
         *   *  2.1 伪类的应用
             *   *  2.1.1 在 a 标签中的应用
                 *  2.1.2 表单验证
                 *  2.1.3 元素索引
             *  2.2 伪元素的应用
             *   *  2.2.1 使用 :after 清除浮动
                 *  2.2.2 插入文本内容
                 *  2.2.3 插入非文本内容
         *  3. CSS3中的伪类和伪元素
         *   *  3.1 CSS3中的伪类
             *  3.2 CSS3中的伪元素

**前言：** 最近在项目练习中使用了很多伪类和以及伪元素，但是对这些知识只有一知半解的理解，下面就来整理一下相关知识，以便后面再使用的时候能够得心应手。

### 1. 什么是伪类和伪元素？ ###

#### 1.1 伪类 ####

CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态，在不同的状态下，有不同的样式。伪类更多的定义的是**状态**，常见的伪类如下表：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:active</td> 
   <td>向被激活的元素添加样式。</td> 
  </tr> 
  <tr> 
   <td>:focus</td> 
   <td>向拥有键盘输入焦点的元素添加样式。</td> 
  </tr> 
  <tr> 
   <td>:hover</td> 
   <td>当鼠标悬浮在元素上方时，向元素添加样式。</td> 
  </tr> 
  <tr> 
   <td>:link</td> 
   <td>向未被访问的链接添加样式。</td> 
  </tr> 
  <tr> 
   <td>:visited</td> 
   <td>向已被访问的链接添加样式。</td> 
  </tr> 
  <tr> 
   <td>:first-child</td> 
   <td>向元素的第一个子元素添加样式。</td> 
  </tr> 
  <tr> 
   <td>:last-child</td> 
   <td>向元素的最后一个子元素添加样式。</td> 
  </tr> 
  <tr> 
   <td>:nth-child(n)</td> 
   <td>向元素的第n个子元素添加样式。</td> 
  </tr> 
  <tr> 
   <td>:required</td> 
   <td>指定具有 required属性 的表单元素。</td> 
  </tr> 
  <tr> 
   <td>:valid</td> 
   <td>指定一个 匹配指定要求 的表单元素。</td> 
  </tr> 
  <tr> 
   <td>:invalid</td> 
   <td>指定一个 不匹配指定要求 的表单元素。</td> 
  </tr> 
 </tbody> 
</table>

#### 1.2 伪元素 ####

CSS 伪元素用于向某些选择器设置特殊效果，常见的伪元素有以下几个：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:first-letter</td> 
   <td>向文本的第一个字母添加特殊样式。</td> 
  </tr> 
  <tr> 
   <td>:first-line</td> 
   <td>向文本的首行添加特殊样式。</td> 
  </tr> 
  <tr> 
   <td>:before</td> 
   <td>在元素之前添加内容。</td> 
  </tr> 
  <tr> 
   <td>:after</td> 
   <td>在元素之后添加内容。</td> 
  </tr> 
 </tbody> 
</table>

**需要注意的是：** 在CSS3中明确规定伪元素前面用两个冒号(`::`)来表示，而伪类用一个冒号来表示(`:`)，但是由于浏览器兼容的问题，它们都用一个冒号(`:`)来表示，所以比较容易混淆。

### 2. 伪类和伪元素的使用场景？ ###

#### 2.1 伪类的应用 ####

伪类选择器可以分为两种：**静态伪类**和**动态伪类**。

*  **静态伪类**，只能用于超链接样式，例如：`:link` ，`:visited`
 *  **动态伪类**，针对所有标签都使用的样式，例如：`:hover`，`:hover`，`:focus`

##### 2.1.1 在 a 标签中的应用 #####

`<a>`标签有四种状态：`:link`，`:hover`，`:active`，`:visited`

/* 超链接点击之前*/
      a:link{        
         color:green;
      }
     /* 超链接被被访问之后 */
      a:visited{ 
    	 color:orange;
      }
     /* 鼠标放在标签上时 */
      a:hover{ 
    	 color:red;
      }
     /* 鼠标点击超链接，但是没松手时 */
      a:active{ 
    	 color:skyblue;
      }

**需要注意：** 这四个属性必须按照以上顺序写，不然设置的样式不会生效！

还有一个小问题，就是`<a>`标签本身定义的属性和`a:link`定义的属性有什么区别呢？

*  `a{}` 定义的样式对所有的`<a>`标签生效
 *  `a:link` 定义的样式只对有href属性的`<a>`标签生效

实际使用中，我们使用 `a:link`较少，因为`a{}`设置的样式也能到达同样的效果。

##### 2.1.2 表单验证 #####

在表单验证中，我们常会用到一下三个属性：

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:required</td> 
   <td>指定具有 required属性 的表单元素</td> 
  </tr> 
  <tr> 
   <td>:valid</td> 
   <td>指定一个 匹配指定要求 的表单元素</td> 
  </tr> 
  <tr> 
   <td>:invalid</td> 
   <td>指定一个 不匹配指定要求 的表单元素</td> 
  </tr> 
 </tbody> 
</table>

（1）`:required` 选择器在表单元素是必填项时设置指定样式。表单元素可以使用 `required` 属性来设置必填项。该选择器只适用于以下表单元素：`input`，`select` 和 `textarea`。

（2）`:valid` 选择器在表单元素的值需要根据指定条件验证时设置指定样式。

（3）`:invalid` 选择器用于在表单元素中的值是非法时设置指定样式。

注意： `:valid`选择器和`:invalid` 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。

看下面的例子，对`input`框的`email`类型进行校验：

input:valid { 
        border-color: green;
    }
    input:invalid { 
        border-color: red; 
    }
    input:required { 
        border-color: pink;
    }

显示结果：  
![在这里插入图片描述][20200606151403677.png]

##### 2.1.3 元素索引 #####

对于制定一系列相同的标签时，我们不需要使用JavaScript去获取，可以使用下面的属性获取：

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:first-child</td> 
   <td>向元素的第一个子元素添加样式。</td> 
  </tr> 
  <tr> 
   <td>:last-child</td> 
   <td>向元素的最后一个子元素添加样式。</td> 
  </tr> 
  <tr> 
   <td>:nth-child(n)</td> 
   <td>向元素的第n个子元素添加样式。</td> 
  </tr> 
  <tr> 
   <td>:nth-of-type(n)</td> 
   <td>向元素同类型中的第n个同级兄弟元素添加元素。</td> 
  </tr> 
 </tbody> 
</table>

**注意：** 上面的选择器中的n，既可以是数字，也可以是关键字，或者一个公式。

**示例：**

<div>
        <h2>标题</h2>
        <p>第一段文字</p>
        <p>第二段文字</p>
        <p>第三段文字</p>
        <p>第四段文字</p>
        <p>第五段文字</p>
      </div>

![在这里插入图片描述][20200606154237823.png]  
从上面的运行结果我们可以看到，`:nth-child(n)`和 `:nth-of-type(n)` 所表示的内容是不一样的，`:nth-child(n)`不关注元素的类型，只关注是父元素下的第n个子元素，而 `:nth-of-type(n)`会关注元素的类型，设置的样式只对第n个同类的兄弟元素有效。

同样我们可以看到我们使用`:first-child`设置的样式没有生效，原因是p标签父元素的第一个子元素不是p标签，所以没有生效。这也说明了`:first-child`、`:last-child` 和`:nth-child(n)`一样，不关注元素的类型。

#### 2.2 伪元素的应用 ####

在使用的伪元素的时候我们需要注意以下几点：

*  伪元素在使用时必须设置content属性，不然是无效的
 *  在伪元素插入的内容，只能在CSS中看到
 *  在伪类中插入的元素通常情况下是内联元素，通常需要转化为块级元素再进行设置
 *  伪元素不会继承父元素的样式
 *  伪元素被应用为元素的子元素

`:before`和`:after`是我们常用的两个伪元素：

<table> 
 <thead> 
  <tr> 
   <th>伪元素</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:before</td> 
   <td>在元素之前添加内容，使用 content 属性来指定要插入的内容。</td> 
  </tr> 
  <tr> 
   <td>:after</td> 
   <td>在元素之后添加内容，使用 content 属性来指定要插入的内容。</td> 
  </tr> 
 </tbody> 
</table>

##### 2.2.1 使用 :after 清除浮动 #####

使用 `:after` 清除浮动是目前使用的比较多的方法，它的形式如下：

**如果我们不清除浮动，那父元素就会发送塌陷。**

在不清除浮动之前，三个块是这样的：  
![在这里插入图片描述][20200606182123852.png]  
清除浮动之后：  
![在这里插入图片描述][20200606182319554.png]

##### 2.2.2 插入文本内容 #####

**显示结果：**  
![在这里插入图片描述][2020060618355449.png]

##### 2.2.3 插入非文本内容 #####

### 3. CSS3中的伪类和伪元素 ###

#### 3.1 CSS3中的伪类 ####

**动态伪类：**

<table> 
 <thead> 
  <tr> 
   <th>伪类</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:link</td> 
   <td>选择所有未被访问的链接。</td> 
  </tr> 
  <tr> 
   <td>:visited</td> 
   <td>选择所有已被访问的链接。</td> 
  </tr> 
  <tr> 
   <td>:active</td> 
   <td>选择活动链接。</td> 
  </tr> 
  <tr> 
   <td>:hover</td> 
   <td>选择鼠标指针位于其上的链接。</td> 
  </tr> 
  <tr> 
   <td>:focus</td> 
   <td>选择获得焦点的 input 元素。</td> 
  </tr> 
 </tbody> 
</table>

**状态伪类：**

<table> 
 <thead> 
  <tr> 
   <th>伪类</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:enabled</td> 
   <td>选择每个启用的元素。</td> 
  </tr> 
  <tr> 
   <td>:disabled</td> 
   <td>选择每个禁用的元素。</td> 
  </tr> 
  <tr> 
   <td>:checked</td> 
   <td>选择每个被选中的元素。</td> 
  </tr> 
 </tbody> 
</table>

**:nth选择器：**

<table> 
 <thead> 
  <tr> 
   <th>伪类</th> 
   <th>示例</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:first-of-type</td> 
   <td>p:first-of-type</td> 
   <td>选择属于其父元素的首个 <code>&lt;p&gt;</code> 元素的每个 <code>&lt;p&gt;</code> 元素。</td> 
  </tr> 
  <tr> 
   <td>:last-of-type</td> 
   <td>p:last-of-type</td> 
   <td>选择属于其父元素的最后 <code>&lt;p&gt;</code> 元素的每个 <code>&lt;p&gt;</code> 元素。</td> 
  </tr> 
  <tr> 
   <td>:only-of-type</td> 
   <td>p:only-of-type</td> 
   <td>选择属于其父元素唯一的 <code>&lt;p&gt;</code> 元素的每个 <code>&lt;p&gt;</code> 元素。</td> 
  </tr> 
  <tr> 
   <td>:only-child</td> 
   <td>p:only-child</td> 
   <td>选择属于其父元素的唯一子元素的每个 <code>&lt;p&gt;</code> 元素。</td> 
  </tr> 
  <tr> 
   <td>:nth-child(n)</td> 
   <td>p:nth-child(2)</td> 
   <td>选择属于其父元素的第二个子元素的每个 <code>&lt;p&gt;</code> 元素。</td> 
  </tr> 
  <tr> 
   <td>:nth-last-child(n)</td> 
   <td>p:nth-last-child(2)</td> 
   <td>同上，从最后一个子元素开始计数。</td> 
  </tr> 
  <tr> 
   <td>:nth-of-type(n)</td> 
   <td>p:nth-of-type(2)</td> 
   <td>选择属于其父元素第二个 <code>&lt;p&gt;</code> 元素的每个 <code>&lt;p&gt;</code> 元素。</td> 
  </tr> 
  <tr> 
   <td>:nth-last-of-type(n)</td> 
   <td>p:nth-last-of-type(2)</td> 
   <td>同上，但是从最后一个子元素开始计数。</td> 
  </tr> 
  <tr> 
   <td>:last-child</td> 
   <td>p:last-child</td> 
   <td>选择属于其父元素最后一个子元素每个 <code>&lt;p&gt;</code> 元素。</td> 
  </tr> 
  <tr> 
   <td>:empty</td> 
   <td>p:empty</td> 
   <td>选择没有子元素的每个 <code>&lt;p&gt;</code> 元素（包括文本节点）。</td> 
  </tr> 
  <tr> 
   <td>:not(selector)</td> 
   <td>:not§</td> 
   <td>选择非 <code>&lt;p&gt;</code> 元素的每个元素。</td> 
  </tr> 
  <tr> 
   <td>:root</td> 
   <td>:root</td> 
   <td>选择文档的根元素。</td> 
  </tr> 
 </tbody> 
</table>

#### 3.2 CSS3中的伪元素 ####

<table> 
 <thead> 
  <tr> 
   <th>伪元素</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>::after</td> 
   <td>已选中元素的最后一个子元素</td> 
  </tr> 
  <tr> 
   <td>::before</td> 
   <td>已选中元素的第一个子元素</td> 
  </tr> 
  <tr> 
   <td>::first-letter</td> 
   <td>选中某个款级元素的第一行的第一个字母</td> 
  </tr> 
  <tr> 
   <td>::first-line</td> 
   <td>匹配某个块级元素的第一行</td> 
  </tr> 
  <tr> 
   <td>::selection</td> 
   <td>匹配用户划词时的高亮部分</td> 
  </tr> 
 </tbody> 
</table>

[20200606151403677.png]: https://img-blog.csdnimg.cn/20200606151403677.png?
[20200606154237823.png]: https://img-blog.csdnimg.cn/20200606154237823.png?
[20200606182123852.png]: https://img-blog.csdnimg.cn/20200606182123852.png?
[20200606182319554.png]: https://img-blog.csdnimg.cn/20200606182319554.png?
[2020060618355449.png]: https://img-blog.csdnimg.cn/2020060618355449.png