HTML中常见伪类和伪元素有什么区别

这篇文章主要介绍了HTML中常见伪类和伪元素有什么区别的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇HTML中常见伪类和伪元素有什么区别文章都会有所收获，下面我们一起来看看吧。

10年积累的网站制作、成都网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有淮安免费网站建设让你可以放心的选择与我们合作。

提到伪类，在人们的印象中最常用的不过是: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() –用于引用媒体文件。

示例：

h2::before { content: url(logo.png); }

counter() –调用计数器，可以不使用列表元素实现序号功能。

示例：

h3:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

关于“HTML中常见伪类和伪元素有什么区别”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“HTML中常见伪类和伪元素有什么区别”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。