当前位置：主页 > 查看内容

一篇文章带你了解CSS Pseudo-elements(伪元素)

发布时间：2021-08-18 00:00| 有 位朋友查看

简介：CSS Pseudo-elements 伪元素是一个附加至选择器末的关键词，允许对被选择元素的特定部分修改样式。CSS伪元素是一种样式化文档元素的方法，这些元素没有由文档树中的位置明确定义。 一、什么是伪元素? CSS伪元素允许设置元素或元素部分的样式，而无需向其添加……

CSS Pseudo-elements 伪元素是一个附加至选择器末的关键词，允许对被选择元素的特定部分修改样式。CSS伪元素是一种样式化文档元素的方法，这些元素没有由文档树中的位置明确定义。

一、什么是伪元素?

CSS伪元素允许设置元素或元素部分的样式，而无需向其添加任何ID或类。当只想为段落的第一个字母设置样式以创建首字下沉效果，或者只想通过样式表在元素之前或之后插入一些内容等情况下，这将非常有用。

CSS3 为伪元素引入了新的双冒号(::)语法，以区分伪元素和伪类。

伪元素的新语法可以通过以下方式给出：

  1. /*选择器::伪元素{ 属性：值 ; }*/ 

二、::first-line 第一行伪元素

该::first-line伪元素应用特殊的样式添加到文本的第一行。

例：(规则设置了段落中第一行文本的格式。第一行的长度取决于浏览器窗口或包含元素的大小)。

  1. <!DOCTYPE html> 
  2. <html> 
  3.   <head> 
  4.     <meta charset="utf-8"> 
  5.     <title>CSS ::first-line第一行伪元素示例</title> 
  6.     <style> 
  7.       p::first-line { 
  8.         color: #ff0000; 
  9.         font-variant: small-caps; 
  10.       } 
  11. </style> 
  12.   </head> 
  13.   <body style="background-color: aqua;"> 
  14.     <p> 
  15.       本段的第一行与其余各行的样式不同。 
  16.  
  17.       本段的第一行与其余各行的样式不同。 
  18.  
  19.       本段的第一行与其余各行的样式不同。 
  20.  
  21.       本段的第一行与其余各行的样式不同。 
  22.  
  23.       本段的第一行与其余各行的样式不同。 
  24.     </p> 
  25.   </body> 
  26. </html> 

注意：

可以应用于::first-line伪元素的CSS属性是：font字体属性, background背景属性, color, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height。

三、:: first-letter伪元素

::first-letter伪元素用于将特殊的样式添加到文本的第一行的第一个字母。

例：(规则设置文本段落的首字母格式，并创建类似首字下沉的效果)。

  1. p::first-letter { 
  2.    color: #ff0000; 
  3.    font-size: xx-large; 
  4. } 

注意：

可以应用于::first-letter伪元素的CSS属性是：font 字体属性, text-decoration, text-transform, letter-spacing, word-spacing, line-height, float, vertical-align ，color, margin 和 padding 属性, border 边框属性, background 背景属性。

如果没有属性float或 float属性值为'none‘。

四、:: before和:: after伪元素

::before和::after伪元素可以用于之前或一个元素的内容之后插入生成的内容。

content CSS属性与这些伪元素结合使用时，插入所生成的内容。

这对于进一步修饰内容丰富的元素非常有用，这些元素不应属于页面的实际标记。可以使用这些伪元素插入常规字符串或嵌入对象(例如图像)和其他资源。

例：

  1. <style> 
  2.  
  3.             h1::before { 
  4.                 content: url("img/border.png"); 
  5.                
  6.             } 
  7.  
  8.             h1::after { 
  9.                 content: url("img/border.png"); 
  10.             } 
  11. </style> 

五、伪元素和CSS类

通常，只需要使用这些伪元素设置文本的某个段落或其他块级元素的样式。在那里，向伪元素声明一个类就起作用了。伪元素可以与CSS类组合以产生效果，特别是对于具有该类的元素。

例：(规则将显示所有段落的第一个字母class="article"，以绿色，大小为xx-large。)

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="utf-8"> 
  5.         <title>使用CSS伪元素与css类示例</title> 
  6.         <style> 
  7.             p.article::first-letter { 
  8.                 color: #FF0000; 
  9.                 font-size: xx-large; 
  10.             } 
  11. </style> 
  12.     </head> 
  13.     <body style="background-color: aqua;"> 
  14.         <p class="article">This a sample article.</p> 
  15.         <p>This a normal paragraph.</p> 
  16.     </body> 
  17. </html> 

六、总结

本文基于CSS基础，主要介绍了什么是伪元素，::first-line， :: first-letter属性在实际项目中的应用，以及介绍了伪元素可以与CSS类组合以产生效果。实现页面的效果。

欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。

本文转载自微信公众号「前端进阶学习交流」，可以通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。


本文转载自网络，原文链接：https://mp.weixin.qq.com/s/SwHh0HyYJKrgnWb_x2ozVg
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：宽带接入服务器两方面功能和网络定位 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐