登录  /  注册

CSS 属性 :before && :after的用法,伪类和伪元素的区别_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:37:24
原创
1532人浏览过

一::before && :after的用法

:before

如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容。举例说明:

.before:before{content:'you before'; color:red;} <div class="before"> me</div>
登录后复制

在这里我们给伪元素 :before 添加了属性 content,并赋值为 you before。我们来看效果:

//在指定元素的内容 me 前添加了新内容 you before

我们不难发现这里通过伪元素 :before 添加的新内容区域默认的 display 属性值为 inline,那么我们可不可以修改新内容区域的属性,答案是肯定的。你可以像修改其他元素一样修改它的样式,我们来将它的 display 属性值来改为block。

.before:before{content:'you before'; display:block; color:red;} <div class="before"> me</div>
登录后复制

现在我们再来看下效果:

//由伪元素 :before 生成新内容区域果然变为了块元素

content 属性

对于伪元素 :before 和 :after 而言,属性 content 是必须设置的,我们知道属性的值可以为字符串,也可以有其它形式,比如指向一张图片的 URL:

 content: url( "img/icon.png" )
登录后复制

配合伪类使用

伪元素 :before 还可以配合伪类使用,这里举经常与 :before 配合使用的伪类 :hover 为例:

.before:hover:before{content:'you before'; color:red;} <div class="before"> me</div>
登录后复制

配合取值函数 attr() 使用

还有一种较为常见的用法,即配合取值函数 attr() 一起使用,如:

a::before{content: attr(title)} <a href="http://www.segmentfault.com" title="专业面向开发者的中文技术问答社区"></a>
登录后复制

这个达到的效果跟下面一样:

<a href="http://www.segmentfault.com">专业面向开发者的中文技术问答社区</a>
登录后复制

: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 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。

但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者。

 

作者:风雨后见彩虹

出处:http://www.cnblogs.com/moqiutao/

如果您觉得本文对您的学习有所帮助,请多支持与鼓励。

 

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号