你就记得伪类是用css来创建并控制的,body的代码里是写不出来的。
类是一种数据结构,是面向对象思想的执行者。现代面向对象的语言都支持“类”这种结构。伪类顾名思义就是,不是类的数据结构,因为语言本身不支持(例如vb6.0以前),但是又为了达到类的境界,于是就产生了伪类。通俗点就是伪类和伪娘有些类似,虽然没有女生的本质,但是外表看起来差不多。说到伪娘,让我想到了有一年春节联欢晚会的一首歌名叫做《万水千山总是情》,歌曲荡气回肠,唱出了90后香港回归的热情,唱出了我们穷人的心声。为了支援世博会,请爱护小动物,从我做起,奋发图强,学习雷锋,不怕死的精神。因为明天会更好,愿我们的祖国繁荣富强,夫妻双双把家还。提到伪类,在人们的印象中最常用的不过是:hover、:active、:link、:visited,还有css3里的常用伪类选择器:last-child、:first-child、nth-child(n)等等!w3c上对伪类和为元素的定义分别为:
伪类:伪类用于向某些选择器添加特殊的效果。伪元素:伪元素用于将特殊的效果添加到某些选择器
css3为了明确伪类和伪元素的区别,已经明确了单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素
span:hover //伪类
span::before //伪元素
但是,为了保证兼容性,现在伪元素普遍还是使用单引号。下面我将用单引号的形式给大家做介绍
常见的伪类(pseudo-classes)和伪元素(pseudo-elements)
HTML中常见伪类和伪元素的区别
伪元素的兼容性
Chrome 2+,
Firefox 3.5+ (3.0 had partial support),
Safari 1.3+,
Opera 9.2+,
IE8+ (with some minor bugs),
几乎所有的移动浏览器。
伪元素:before和:after的定义和基本用法
定义:
:before 选择器在被选元素的内容前面插入内容。
:after 选择器在被选元素的内容后面插入内容。
使用:
使用 content 属性来指定要插入的内容。content有几个比较有用的值:[String] – 使用引号包括一段字符串,将会向元素内容中添加字符串。示例:
a:after { content: "↗"}
attr() – 调用当前元素的属性,可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例:
a:after { content:"(" attr(href) ")"}
url() / uri() – 用于引用媒体文件。示例:
h1::before { content: url(logo.png)}
counter() – 调用计数器,可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。示例:
h2:before { counter-increment: chaptercontent: "Chapter " counter(chapter) ". " }