注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

伪类和伪元素的区别  

2014-08-18 18:04:37|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

w3c 对两者的定义:

1、伪类用于向某些选择器添加特殊的效果。

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

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


伪类种类:

伪类 作用
:active 选定的链接
:visited 已访问的链接
:hover 鼠标移动到链接上
:active 选定的链接
:focus 向拥有键盘输入焦点的元素添加样式。
:first-child 向元素的第一个子元素添加样式。
:lang 向带有指定 lang 属性的元素添加样式。

伪元素(只这4个): 

伪元素 作用
:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。

区别:
首先第一点是在计算一个选择器的优先级时,伪类和伪元素的权重是不同的,除了否定伪类的特殊规定外,分开各自作为真正的类和元素计算。因此在比较细节的地方需要纠结;其次是伪类允许在选择器的任何位置,但是伪元素只允许出现在最后一个简单选择器的末尾。

这里用伪类 :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

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



  评论这张
 
阅读(15)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017