css中的伪类和伪元素_html/css_WEB-ITnose
伪类与类相似,但又没有类附加标签上。伪类分为UI伪类和结构化伪类。
UI伪类
:link(将样式添加到未被访问的链接上)
:visted(将样式已添加到访问的链接上)
:hover(将样式添加到鼠标悬浮的元素上)
:active(将样式添加到被激活的元素上)
-
:focus(将样式添加到被选中的元素上)
结构化伪类
:first-child(将样式添加到第一个子元素上)
:last-child(将样式添加到最后一个子元素上)
伪元素是在文档中若有实无的元素。
主要有以下几种
:first-letter(将样式添加到第一个字母)
:first-line(将样式添加到第一行)
:before(在某些元素前面插入某些内容)
:after(在某些元素后面插入某些内容)
看到:after,大家脑子里应该都能浮现出那个清除浮动的CSS的吧。没错,就是这个。
?
1 2 3 4 5 6 7 | .clearfix:after { content : "." ; display : block ; height : 0 ; visibility : hidden ; clear : both ; } |
仔细琢磨下它们的定义。
伪类的实现就好比给这个标签添加了一个虚拟的类。
举个栗子:
?
1 2 3 4 5 | a:hover{ font-size : 20px ; color : red } |
若不用伪类,实现同样的效果,需要这么做
?
1 2 3 4 5 | .hover{ font-size : 20px ; color : red } |
这么一对比,”伪类“就顾名思义了啊。
而伪元素则好比添加了一个新的标签。
?
1 2 3 4 5 | p:first-letter{ font-size : 20px ; color : red }
Hello,World |
若不用伪元素,实现同样的效果,需要这么做
?
1 2 3 4 5 | .first-letter{ font-size : 20px ; color : red }
Hello,World |
因此总结下区分的方法:现实相同效果是需要添加一个类还是一个元素标签。
tips:
1.CSS3为了区别伪类和伪元素,明确使用单冒号来表示伪类,双冒号来表示伪元素。但为兼容性考虑,目前基本还是使用单冒号来表示。
2.搜索引擎不会搜索伪元素的信息。因此,不要通过伪元素添加你想让搜索引擎索引的重要内容
参考资料:
《CSS设计指南》
详解 CSS 属性 - 伪类和伪元素的区别
http://www.jb51.net/css/67317.html
推荐阅读
-
IE下自己制作选项卡菜单类中遇到的iframe缓存问题_html/css_WEB-ITnose
-
独特设计!插图和手绘元素在网页设计中的使用_html/css_WEB-ITnose
-
CSS中的伪类与伪元素及二者间的区别说明
-
在字符串资源文件中添加HTML元素,直接使用字符串资源,HTML元素没起作用的解决办法_html/css_WEB-ITnose
-
详解angular中为HTML元素添加css类的几种方式
-
HTML5新增的Css选择器、伪类介绍
-
CSS伪类与CSS伪元素的区别及由来具体说明
-
HTML5新增的Css选择器、伪类介绍
-
CSS伪类与CSS伪元素的区别及由来具体说明
-
HTML5中的伪类选择器实现一张图片翻转特效(代码实例)