文档章节

详解 CSS 属性 - 伪类和伪元素的区别

Reya滴水心
 Reya滴水心
发布于 2015/08/07 11:00
字数 595
阅读 95
收藏 11
  • CSS 伪类用于向某些选择器添加特殊的效果。

  • CSS 伪元素用于将特殊的效果添加到某些选择器。

可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。

伪类种类

请输入图片描述

伪元素种类

请输入图片描述

区别

这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。

p>i:first-child {color: red}<p>
<i>first</i>
<i>second</i></p>

请输入图片描述 //伪类 :first-child 添加样式到第一个子元素
如果我们不使用伪类,而希望达到上述效果,可以这样做:

.first-child {color: red}<p>
<i class="first-child">first</i>
<i>second</i></p>

即我们给第一个子元素添加一个类,然后定义这个类的样式。那么我们接着看看为元素:

p:first-letter {color: red}<p>I am stephen lee.</p>

请输入图片描述 //伪元素 :first-letter 添加样式到第一个字母
那么如果我们不使用伪元素,要达到上述效果,应该怎么做呢?

.first-letter {color: red}<p><span class='first-letter'>I</span> am stephen lee.</p>

即我们给第一个字母添加一个 span,然后给 span 增加样式。
两者的区别已经出来了。那就是:

伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。

总结

伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。

:Pseudo-classes  
::Pseudo-elements

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


本文转载自:http://segmentfault.com/a/1190000000484493

Reya滴水心
粉丝 39
博文 89
码字总数 34655
作品 0
深圳
前端工程师
私信 提问
css中的伪类和伪元素

伪类 伪类与类相似,但又没有类附加标签上。伪类分为UI伪类和结构化伪类。 UI伪类 :link(将样式添加到未被访问的链接上) :visted(将样式已添加到访问的链接上) :hover(将样式添加到鼠标悬浮的...

sunshinewyf
2015/10/13
63
0
详解CSS3的高级选择器

CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面,而不用改变页面的标签。但是尽管事实上,我们每个人也都意识到了它是有用的,CSS 选择器远未发挥它...

要么伟大要么死_zcv
2016/12/16
4
0
css中:after与::after的区别

基本概念 1.他们都是CSS伪元素,与:hover/:active等伪类不一样。 2.:before/:after伪元素是在CSS2中提出来的,所以兼容性可能到IE8了。 3.::before/::after是CSS3中的写法,为了将伪类和伪元...

BULLEPAO
2017/07/02
0
0
[译]19个CSS level 4 选择器

原文作者:Marouen Mhiri 原文链接:19 CSS-Level-4 selectors(原文标题是20,但实际只有19个) 译者:陈大鱼头 推荐理由:因为喜欢CSS啊 你不得不 💌 CSS 以下所有选择器的兼容性表格内容...

陈大鱼头
05/21
0
0
【前端】你所不知的 CSS ::before 和 ::after 伪元素用法

CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的...

issac宝华
2016/11/01
40
0

没有更多内容

加载失败,请刷新页面

加载更多

[JavaScript]js模块化

没有模块化:<scrpit> CommonJS(服务端):NodeJS AMD(浏览器端):RequireJS等 CMD(浏览器端):Sea.js UMD ES6

Danni3
29分钟前
1
0
拯救你丢失的精度——BigInteger和BigDecimal类(入门)

第三阶段 JAVA常见对象的学习 BigInteger和BigDecimal类 BigInteger类 (一) 构造方法: //针对超过整数范围的运算(整数最大值:2147483647)BigInteger(String val) ####(二) 常用方法: ...

BWH_Steven
30分钟前
3
0
开源 java CMS - FreeCMS2.8 自定义标签 infoSearch

项目地址:http://www.freeteam.cn/ infoSearch 根据参数和搜索关键词提取信息分页对象。 参数 说明 siteid 信息所属站点id num 每页显示数量 order 排序类型 1 固顶有效并降序,发布时间降序...

freeteam
41分钟前
2
0
java思维导图整理

jmm https://www.edrawsoft.cn/viewer/public/s/b0178374373697; redis https://www.edrawsoft.cn/viewer/public/s/5691c269955848 map https://www.edrawsoft.cn/viewer/public/s/b67533638......

流光韶逝
56分钟前
6
0
Gnu/Linux 防止暴力扫描及其它

RedHat7 手工脚本: # iptables iptables -A INPUT -i eno16777728 -p tcp -m multiport --destination-port 135,136,137,138,139,445,4899,1900 -j LOG iptables -A INPUT -p tcp -m multip......

晒太阳的小猪
今天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部