摘要：一的用法如同对伪元素的名称一样，是用来给指定的元素的内容前面插入新的内容。二伪类和伪元素的区别伪类种类伪元素种类伪类作用对象是整个元素例如尽管这些条件不是基于的，但结果每一个都是作用于一个完整的元素，比如整个链接，段落，等等。
一：:before && :after的用法 :before
如同对伪元素的名称一样，:before 是用来给指定的元素的内容前面插入新的内容。举例说明：
.before:before{content:"you before"; color:red;}
me
在这里我们给伪元素 :before 添加了属性 content，并赋值为 you before。我们来看效果：
//在指定元素的内容 me 前添加了新内容 you before
我们不难发现这里通过伪元素 :before 添加的新内容区域默认的 display 属性值为 inline，那么我们可不可以修改新内容区域的属性，答案是肯定的。你可以像修改其他元素一样修改它的样式，我们来将它的 display 属性值来改为block。
.before:before{content:"you before"; display:block; color:red;}
me
现在我们再来看下效果：
//由伪元素 :before 生成新内容区域果然变为了块元素
对于伪元素 :before 和 :after 而言，属性 content 是必须设置的，我们知道属性的值可以为字符串，也可以有其它形式，比如指向一张图片的 URL:
content: url( "img/icon.png" )
配合伪类使用
伪元素 :before 还可以配合伪类使用，这里举经常与 :before 配合使用的伪类 :hover 为例：
.before:hover:before{content:"you before"; color:red;}
me
配合取值函数 attr() 使用
还有一种较为常见的用法，即配合取值函数 attr() 一起使用，如：
a::before{content: attr(title)}
这个达到的效果跟下面一样：
专业面向开发者的中文技术问答社区:after
伪元素 :after 与 伪元素 :before 类型相同，只不过它指定的属性 content 值为出现在指定元素内容的后面，说明省。
二：伪类和伪元素的区别 伪类种类 伪元素种类伪类：作用对象是整个元素
例如：
a:link
{color:#111}
a:hover
{color:#222}
div:first-child
{color:#333}
div:nth-child(3)
{color:#444}
尽管这些条件不是基于DOM的，但结果每一个都是作用于一个完整的元素，比如整个链接，段落，div等等。
伪元素：作用于元素的一部分
例如：
p::first-line
{color:#555}
p::first-letter
{color:#666}
a::before
{content : "hello
world";}
伪元素作用于元素的一部分：一个段落的第一行 或者 第一个字母。
总结：
伪元素其实相当于伪造了一个元素，例如before,first-letter达到的效果就是伪造了一个元素，然后添加了其相应的效果而已；
而伪类没有伪造元素，例如first-child只是给子元素添加样式而已。
伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。
如果您觉得本文对您的学习有所帮助，请多支持与鼓励。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111122.html
作为一个CSS3初学不久者来说，很容易混淆单冒号（:）和双冒号（::）的用法，以为两者可以互换着来使用。我自己之前也混淆过他们，因为两者看起来太相像了，就像孪生兄弟。但实际上，他们的区别还是挺大的，最多算得上近房亲戚。 下面我们来开始讲讲单冒号（:）伪类和双冒号（::）伪元素有什么相同和不同点（另外在CSS2中单冒号: 也叫做伪对象，具体可看看http://www.mb5u.com/tool/cs...
摘要：伪类和伪元素，对于绝大多数同学来说，都是耳熟能详的名字，但确实又有很多人搞不清楚它们之间的区别，以致于混淆概念。除了上面这个本质区别以外，在中，伪类用单冒号表示而伪元素用双冒号表示。 showImg(https://segmentfault.com/img/bV4WC1?w=510&h=310); 伪类和伪元素，对于绝大多数同学来说，都是耳熟能详的名字，但确实又有很多人搞不清楚它们之间...
摘要：伪元素被当做的样式来进行展现，用法和普通的元素用法是一样的。中的伪元素使用个冒号，在中，为了区分伪类和伪元素，规定伪元素使用个冒号。伪元素的特点优点不占用节点，减少节点数。不仅块级元素可以设置伪元素，大部分行级元素也可以。 1 什么是伪元素？ CSS 在渲染文档的时候，伪元素可以通过 css 给 HTML 添加一个元素（叫标签也行），这个元素在文档树中是找不到的。伪元素被当做 CSS ...
摘要：选择器基础选择器标签选择器针对一类标签注意选择的所有，而不是一个。元素元素是文档结构的基础。行内元素不会在它本身之前或之后生成分隔符，所以可以出现在另一个元素内容中，而不会破坏其显示。 css选择器 基础选择器 1.标签选择器：针对一类标签 注意：选择的所有，而不是一个。 p{ font-size:14px; } css 2.ID选择器：针对某一个特定的标签使用，只能使...
摘要：发现有很多东西效果其实可以用伪类或者伪元素实现。记录下为什么引入伪类和伪元素引入伪类和伪元素概念是为了格式化文档树以外的信息，也就是说。伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者列表中的第一个元素。 最近用js实现一些css效果。发现有很多东西效果其实可以用伪类或者伪元素实现。特地补充下这方面的知识。 记录下 为什么引入伪类和伪元素 CSS introd...
阅读 2305·2021-11-23 10:09
阅读 2884·2021-10-12 10:11
阅读 2591·2021-09-29 09:35
阅读 1334·2019-08-30 15:53
阅读 2259·2019-08-30 11:15
阅读 2904·2019-08-29 13:01
阅读 2289·2019-08-28 18:15
阅读 3361·2019-08-26 12:13
