CSS总结-------伪元素

客官°小女子只卖身不卖艺 2022-06-07 01:38 266阅读 0赞

CSS 伪元素 是Pseudo-elements。  
作用是：向某些选择器设置特殊效果

# 1.伪元素介绍 #

伪元素是创造关于文档语言能够指定的文档树之外的抽象。  
伪元素不是真正的元素，不存在与文档之中，所以JS无法操作他。  
我们可以在外部使用它，但是在文档中并不会生成，可以理解为源代码里面看不到他们。  
但是，这确实与其他元素无异，我们可以对他进行其他元素可以有的无差别操作。

注意：因为伪元素的特殊性，伪元素中必须有content，否则毫无意义。

在伪元素中，基本上，每一个我们所添加的元素都不会干扰现有的HTML结构  
在美化等方面，伪元素将给我们带来前所未有的体验，甚至可以做到任何事情。

案例：为文字添加引号

1 <style> 2 p:before { 3 content: open-quote; 4 } 5 p:after { 6 content: close-quote; 7 } 8 </style>
    9 
    10 <div >
    11          <h1 class="wei">我是伪元素</h1>
    12          <p><br>为其添加引号<br></p>
    13 </div>

![这里写图片描述][SouthEast]

**可以看到，我们的 < br >换行符有效，说明伪元素是针对 p 中的文字有效！**

# 2.伪元素的格式 #

为了区分开来，我们为伪元素加上冒号

selector:pseudo-element {property:value;} //独立使用
    selector.class:pseudo-element {property:value;} //配合class使用

# 3.伪元素的分类 #

所有CSS伪类/元素

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th align="center">示例</th> 
   <th>示例说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:link</td> 
   <td align="center">a:link</td> 
   <td>选择所有未访问链接</td> 
  </tr> 
  <tr> 
   <td>:visited</td> 
   <td align="center">a:visited</td> 
   <td>选择所有访问过的链接</td> 
  </tr> 
  <tr> 
   <td>:active</td> 
   <td align="center">a:active</td> 
   <td>选择正在活动链接</td> 
  </tr> 
  <tr> 
   <td>:hover</td> 
   <td align="center">a:hover</td> 
   <td>把鼠标放在链接上的状态</td> 
  </tr> 
  <tr> 
   <td>:focus</td> 
   <td align="center">input:focus</td> 
   <td>选择元素输入后具有焦点</td> 
  </tr> 
  <tr> 
   <td>:first-letter</td> 
   <td align="center">p:first-letter</td> 
   <td>选择每个 元素的第一个字母</td> 
  </tr> 
  <tr> 
   <td>:first-line</td> 
   <td align="center">p:first-line</td> 
   <td>选择每个 元素的第一行</td> 
  </tr> 
  <tr> 
   <td>:first-child</td> 
   <td align="center">p:first-child</td> 
   <td>选择器匹配属于任意元素的第一个子元素的 &lt;]p&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>:before</td> 
   <td align="center">p:before</td> 
   <td>在每个元素之前插入内容</td> 
  </tr> 
  <tr> 
   <td>:after</td> 
   <td align="center">p:after</td> 
   <td>在每个元素之后插入内容</td> 
  </tr> 
  <tr> 
   <td>:lang(language)</td> 
   <td align="center">p:lang(it)</td> 
   <td>为元素的lang属性选择一个开始值</td> 
  </tr> 
 </tbody> 
</table>

## 1.：first-line ##

“first-line” 伪元素用于向文本的首行设置特殊样式。  
这个伪元素用于设置元素中的第一行文本的样式，而不论该行出现多少单词。

注释：”first-line” 伪元素只能用于块级元素。  
注释：下面的属性可应用于 “first-line” 伪元素：  
• font  
• color  
• background  
• word-spacing  
• letter-spacing  
• text-decoration  
• vertical-align  
• text-transform  
• line-height  
• clear

## 2.first-letter 伪元素 ##

“first-letter” 伪元素用于向文本的首字母设置特殊样式：

这个伪元素用于指定一个元素第一个字母的样式。所有前导标点符号应当与第一个字母一同应用该样式。某些语言有一些要处理为单个字符的字母组合，如果是这样，用户代理可能会把首字母同时应用到这个字母组合。

注释：”first-letter” 伪元素只能用于块级元素。  
注释：下面的属性可应用于 “first-letter” 伪元素：  
• font  
• color  
• background  
• margin  
• padding  
• border  
• text-decoration  
• vertical-align (仅当 float 为 none 时)  
• text-transform  
• line-height  
• float  
• clear

## 3.”:before” 伪元素可以在元素的内容前面插入新内容。 ##

这个伪元素允许创作人员在元素内容的**最前面**插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

1 h1.wei:before {content:'"a"';}
    2 
    3 <div >
    4           <h1 class="wei">我是伪元素</h1>
    5 </div>

为其添加一个字母a在前面

## 4.:after 伪元素 ##

“:after” 伪元素可以在元素的内容之后插入新内容。

这个伪元素允许创作人员在元素内容的**最后面**插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

# 4.总结 #

因为专业知识并不强，加上积累还不多，没法将伪元素的魅力展现出来，这里只能先介绍。

当然，还有一个伪类，亦有相同的意思，以后再说。

[SouthEast]: /images/20220607/c1795f358a0f48cfaac85fa54a8ac61b.png