码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-08-23 11:20:09      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:

伪类和伪元素皆独立于文档结构。它们获取元素的途径也不是基于id、class、属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素)。区别总结如下:

 

①写法不一样:

css3 为了区分两者,明确规定伪类用一个冒号来表示,伪元素则用两个冒号来表示
:Pseudo-classes
::Pseudo-elements


②功能不一样:

CSS伪类 (Pseudo-classes):用于向某些选择器添加特殊的效果,即在元素当前静态样式的基础上添加特殊效果(一般都是动态效果),所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。

 

属性 描述
:active 向被激活的元素添加样式
:focus 向拥有键盘输入焦点的元素添加样式
:hover 当鼠标悬浮在元素上方时,向元素添加样式
:link 向未被访问的链接添加样式
:visited 向已被访问的链接添加样式
:first-child 向元素的第一个子元素添加样式
:lang 向带有指定lang属性的元素添加样式

 

备注:在 CSS 定义中,同一个元素的 :hover 必须位于 :link、:visited 之后才能生效,:active 必须位于 :hover 之后才能生效。

 

 css伪元素 (Pseudo-elements):用于向某些选择器设置特殊效果,是对元素中的特定内容进行设置和操作,操作层次比伪类更深,故动态性比伪类要差。

 

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

 

 

 

 

 

 



 

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

标签:

原文地址:http://www.cnblogs.com/iceflorence/p/5796083.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!