CSS之 :before :after的用法,伪类和伪元素的区别
一::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 : "helloworld";}
伪元素作用于元素的一部分:一个段落的第一行 或者 第一个字母。
总结:
伪元素其实相当于伪造了一个元素,例如before,first-letter达到的效果就是伪造了一个元素,然后添加了其相应的效果而已;
而伪类没有伪造元素,例如first-child只是给子元素添加样式而已。
伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。
但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者。
转载于:https://www.cnblogs.com/moqiutao/p/4783896.html
CSS之 :before :after的用法,伪类和伪元素的区别相关推荐
- 【重识 HTML + CSS】CSS 伪类、伪元素
CSS 伪类.伪元素 伪类 (pseudo-classes) 动态伪类 (dynamic pseudo-classes) :link.:visited.:hover.:active :focus 目标 ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:focus 伪类
小程序中的WXSS(css)选择器课程-伪类-:focus 伪类 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/hua ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:checked 伪类(不支持)
小程序中的WXSS(css)选择器课程-伪类-:checked 伪类(不支持) 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/to ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:nth-child() 伪类
小程序中的WXSS(css)选择器课程-伪类-:nth-child() 伪类 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/top ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:nth-last-child伪类
小程序中的WXSS(css)选择器课程-伪类-:nth-last-child伪类 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/t ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:first-child 伪类
小程序中的WXSS(css)选择器课程-伪类-:first-child 伪类 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/top ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:last-child 伪类
小程序中的WXSS(css)选择器课程-伪类-:last-child 伪类 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topi ...
- 谈谈css中的伪类和伪元素,谈谈css中的伪类和伪元素
熟习前台的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆.本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用法. css选择器 css选择除了我们常 ...
- 详解 CSS 属性 - 伪类和伪元素的区别
2019独角兽企业重金招聘Python工程师标准>>> CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择 ...
最新文章
- 2018最新手机号正则
- 3d geometric model website http://www.cse.ohio-state.edu/~tamaldey/
- 产品运行所需的信息检索失败_为服务业注入新活力,华北工控推出服务机器人专用计算机产品方案...
- Python 操作 pymysql 批量 增、删、改、查
- C++ Primer Plus 第一章 预备知识
- Leetcode每日一题:50.powx-n
- Win7删除不常用的自带应用程序
- HDOJ--3790--最短路径问题(双权值问题)
- 一个普通专科生,拿什么拯救你的未来?(精简版)
- 欧姆龙NX控制器与Sysmac studio的电机配置方法
- Nessus最新版8.15安装教程
- 终于有人把流量运营讲明白了
- linux wrf 系统_linux wrf 系统
- 2019.2.18 模板的创建和自定义子模板文件(single.php 等)
- 电信路由器用linux开发板,WRTnode: WRTnode是基于家用无线路由器芯片的开源Linux开发板,想法源于我之前的项目和产业经验...
- 【博弈论】POJ[2348]Euclid's Game
- IC设计中时钟偏斜对延时的影响
- 我是如何将Pluto作为library分享到jCenter
- 跟着大佬上大分-Web of Lies
- [Rx86OS-XIX] 应用程序和系统调用
热门文章
- scrapy + selenium + chromedriver爬取动态数据
- linux执行某个目录的程序
- 刷题总结——拆网线(noip模拟 贪心)
- 【转】Kconfig,Makefile 和 .config
- Kubernetes Dashboard - 每天5分钟玩转 Docker 容器技术(173)
- 富士康第三季度净利润10.9亿美元 同比下滑8.7%
- 手把手玩转协同编辑(1):AST (Address Space Transformation)地址空间转换算法 基本介绍...
- PT60报错(在表 $ 中午关键字$的输入项目T555Z)
- Android系统默认Home应用程序(Launcher)的启动过程源码分析
- [原创] 浅谈ETL系统架构如何测试?