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

最新推荐文章于 2024-10-06 15:04:56 发布

志字辈小蚂蚁

最新推荐文章于 2024-10-06 15:04:56 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/zzg19950824/article/details/78156051

CSS 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了CSS伪元素的概念及其使用方式，包括:before和:after伪元素如何在元素前后插入内容，以及:first-letter和:first-line伪元素如何对文本的首字母和首行设置样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

这里写图片描述

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

2.伪元素的格式

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

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

3.伪元素的分类

所有CSS伪类/元素

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

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.总结

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

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