解析CSS中的伪元素及其与伪类的区别-阿里云资讯网
解析CSS中的伪元素及其与伪类的区别
发布时间：
更新时间：
来源：网络
上传者：用户
伪元素我们知道随着CSS规范进一步完善，新增的CSS伪元素越来越多，但是在日常开发中，我们常用的及浏览器支持情况比较乐观的当数before和after了。但是我们在日常开发中使用的都是:after {content: ”;}来清除浮动，及新增一个元素（照顾到IE8浏览器这里使用单冒号）。但是content的可取值有哪些呢？1. 字符串： content: “a string”- 注意：特殊字符必须使用unicode编码；2. 图片： content: url(/path/to/benjamin.png) – 图片以原始尺寸插入，不能调整大小。因图片支持渐变，因此可以对伪元素使用渐变效果；3. 无字符： content: “”- 这个在清除浮动和设置背景图片比较有用，我们可以设置背景图片的width和height，甚至我们可以使用background-size属性来调整背景图片大小；4. 计数器： content: counter(li)- 在:marker出现之前，对于设置列表序号样式比较有用；具体参见下面代码： CSS Code复制内容到剪贴板 ol&{ && &&&&countercounter-reset:& && } && ol&li&{ && &&&&position:& && &&&&padding-left:&2 && &&&&line-height:&30 && &&&&list-style:& && } && ol&li:before&{ && &&&&position:& && &&&&top:&8 && &&&&left:&0; && &&&&height:&16 && &&&&width:&16 && &&&&line-height:&16 && &&&&text-align:& && &&&&content:&counter(li); && &&&&countercounter-increment:& && &&&&border-radius:&50%; && &&&&background-color:&# && &&&&font-size:&12 && &&&&color:&# && }&&
PS：我们不能设置content: “&h2&Benjamin&/h2&”，它不会解析按HTML代码片段解析，而会解析为字符串；5. content: attr(attrName)content可以利用attr函数获取属性值，尤其使用在伪类中比较方便。见如下代码： CSS Code复制内容到剪贴板 &style&type=&text/css&& && &&&&.list&li&{ && &&&&&&&&list-style:& && &&&&&&&&margin-bottom:&20 && &&&&} && &&&&.list&li&span&{ && &&&&&&&&vertical-align:& && &&&&} && &&&&.list&li:before&{ && &&&&&&&&content:&attr(data-index); && &&&&&&&&display:&inline- && &&&&&&&&width:&20 && &&&&&&&&height:&20 && &&&&&&&&text-align:& && &&&&&&&&color:&# && &&&&&&&&vertical-align:&&&&&&&&& && &&&&&&&&background-color:&#f00; && &&&&&&&&border-radius:&50%; && &&&&} && &/style& && &ul&class=&list&& && &&&&&li&data-index=&1&&&span&专注前端开发和用户体验&/span&&/li& && &&&&&li&data-index=&2&&&span&专注前端开发和用户体验&/span&&/li& && &&&&&li&data-index=&3&&&span&专注前端开发和用户体验&/span&&/li& && &&&&&li&data-index=&4&&&span&专注前端开发和用户体验&/span&&/li& && &&&&&li&data-index=&5&&&span&专注前端开发和用户体验&/span&&/li& && &/ul&&&
说了前面的话，下面说说IE中遇到的bug:Bug描述：使用伪类实现”+”/”-“号图像切换时，通过增加和移除opened类来实现，但是在IE8中效果怪异，无法正确渲染，其它浏览器中正常： CSS Code复制内容到剪贴板 .plus&{ && &&&&position:& && &&&&display:&inline- && &&&&vertical-align:& && &&&&width:&20 && &&&&height:&20 && &&&&margin-right:&24 && &&&&border:&1px&solid&#fdaa47; && &&&&border-radius:&3 && &&&&overflow:& && } && /*&横向&*/& && .plus:before&{ && &&&&content:&''; && &&&&position:& && &&&&top:&10 && &&&&left:&3 && &&&&width:&14 && &&&&height:&1 && &&&&background-color:&#fdaa47; && &&&&display:& && } && /*&纵向&*/& && .plus:after&{ && &&&&display:& && &&&&content:&''; && &&&&width:&1 && &&&&height:&14 && &&&&background-color:&#fdaa47; && &&&&position:& && &&&&left:&10 && &&&&top:&3 && } && .opened:after&{ && &&&&top:&-30 && }&&
当通过addClass(‘opened’)和removeClass(‘opened’),来切换加减号时：IE8浏览器中效果没有达到预期，部分样式无法覆盖，现解决方案如下: JavaScript Code复制内容到剪贴板 &div&class=&parent&& && &&&&&i&class=&plus&&&/i& && &/div& && &script&type=&text/javascript&& && $('.parent').on('click',&function()&{ && &&&&var&$i&=&$(this).find('i'), && &&&&&&&&className&=&$i.attr('class'); && &&&&className&=&/opened/.test(className)&?&'plus'&:&className&+'&opened'; && &&&&$i.replaceWith('&i&class=&'+&className&+'&&&&/i&'); && }); && &/script&&&
伪类和伪元素的异同1. W3C CSS 2.1 Selectors对伪类和伪元素没有做出区分，都是使用一个冒号比如伪类:first-child，伪元素:first-linePS：在该规范中明确提到了a链接的几种伪类的书写顺序：Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the ‘color’ property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.
2. CSS Selectors Level 3该规范中为伪类和伪元素做了区分，伪类使用单冒号，伪元素开始使用双冒号。比如伪类:first-child伪元素::first-line、::first-letter、::before、::afterCSS 3在CSS2.1的基础上增加了不少伪类:target、UI元素状态的伪类:checked等、结构性伪类:nth-child()等，具体可以看规范。
3. CSS Selectors Level 4草案该草案中又增加了很多新的伪类，比如与input控制状态、值状态、值校验相关的伪类，树形结构的伪类，网格结构的伪类等。
4. CSS Pseudo-Elements Module Level 4——W3C First Public Working Draft, 15 January 2015增加了一些伪元素，如：Selecting Highlighted Content: the ::selection, ::spelling-error, and ::grammar-error pseudo-elements，Placeholder Input: the ::placeholder pseudo-element。
5. 常见应用伪类：1) a链接样式2) 隔行变色伪元素：1) 最常见的使用伪元素after清除浮动，.fix{*zoom:1;}.fix:after,.fix::after{display: content: “clear”; height: 0; clear: overflow: visibility:}2) letter-spacing+first-letter实现按钮文字隐藏3) 首行、首字母样式&
本文内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：zixun-group@service.aliyun.com 进行举报，并提供相关证据，工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。
在当今高速发展的中国，嫦娥已奔月、高铁已运转、杀人已不犯法、苹果当红的形势下，IE6浏览器本应受到极大重创，然而自2001年10月IE6问世以来，中国网民数量对此浏览器的喜爱却有增无减，原因何在： XP系统的成功引进。经济高速发展，贫富差距加大，人民生活水平虽有提高，但架不住物价上涨，故系统已无力更新。 银行和政府大力扶持IE6。部分官员贪污腐败，挥霍无度，却无钱用于浏览器更新。 基于IE内...
SEO外链增加流量
SEO的最高境界
&博客类网站推荐：1、新浪博客 blog.sina.com.cn2、网易博客 blog.163.com3、博客网 bokee.com4、搜狐博客 blog.sohu.com5、腾讯博客 blog.qq.com6、和讯博客 blog.hexun.com7、51博客 51.com8、博客大巴 blogbus.com9、凤凰博报 blog.ifeng.com10、天涯博客 blog.ti...
DIV+CSS布局
好处和意义
业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？ Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。 如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效...
复制代码代码如下: &!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.0 Transitional//EN&& &HTML& &HEAD& &TITLE& New Document &/TITLE& &style tyep=&text/css&& ...
很多初学制作网页的朋友，可能会遇到的一个常见问题，就是在CSS中加了margin:0却没有效果，不能居中的问题！margin:0的意思就是：上下边界为0，左右根据宽度自适应！其实就是~~水平居中的意思，呵呵！小一在这里说两个典型的错误引起的不能居中的问题： 1、没有设置宽度&div style=&margin:0&&&...
web开发，IE9的一个很重要的更新就是可以把一个网站拉到任务栏里，把一个网站当作一个web应用程序。同时一个网站也可以在开始菜单栏里面，当作一个应用程序，但应用程序需要网络的支持。 web开发里面，数据库的内容我们可以不改，但我们可以按我们的意愿去改动一个web应用程序外观等内容。页面里面的内容，我们不需要改动，当然也可以改动。 1，我们可以改动头元素（meta） 添加代码 &met...
若您要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在5个工作日内回复。
售前咨询热线
支持与服务
资源和社区
关注阿里云
International194 次阅读
标签：至少1个，最多5个
在css2中是这样定义二者的：
CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。
伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不能被常规CSS选择器获取到的信息。
第一点讲的是获取不存在与DOM树中的信息。比如&a&标签的:link、visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取；
第二点讲的是获取不能被常规CSS选择器获取的信息。比如伪类:target，它的作用是匹配文档(页面)的URI中某个标志符的目标元素。
target:URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target 选择器可用于选取当前活动的目标元素。
&li&123&/li&
li:first-child类似于
&li class="first-child"&123&/li&
li.first-child 一样这个时候，被修饰的&li&元素依然处于文档树中。
ul:first-letter类似于
&span class="first-letter"&1&/li&
ul:first-letter被修饰的时候，&span&元素并不处于文档树中。
因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。
:first-child CSS伪类代表了一组兄弟元素中的第一个元素。在level3实现中，被匹配的元素需要具有一个父级元素，而在level4实现中则不需要
:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
p:first-child，常见的错误理解是这个选择器是选择p的第一个元素。
伪类的实质就是把某种幻想类关联到某种伪类相关的元素中。
:first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。同样类型的选择器 :last-child
和 :last-of-type、:nth-child(n)
:nth-of-type(n) 也可以这样去理解。
伪元素包括:first-letter, :first-line, :before ,:after等
所有的伪元素都要写在伪元素选择器的最后面，如果这样写就会出错，
p:first-letter em{
这是不允许的。
0 收藏&&|&&4
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。详解CSS中的伪类与伪元素及二者间的区别
segmentfault & 发布时间： 10:54:47 & 作者：StephenLee
这篇文章主要介绍了详解CSS中的伪类与伪元素及二者间的区别,实际上CSS3中规范了一种简单粗暴的方法,即伪类前用一个冒号表示,而伪元素前用两个冒号表示,这样就不容易混淆了,需要的朋友可以参考下
CSS伪类的概念及作用CSS伪类(Pseudoclasses)是选择符的螺栓，用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudoclass{property:}，简单地用一个半角英文冒号(:)来隔开选择符和伪类。CSS很多的建议并没有得到浏览器的支持，但有四个可以安全使用的用在连接上的CSS伪类。1.link用在为访问的连接上。2.visited用在已经访问过的连接上。3.hover用于鼠标光标置于其上的连接。4.active用于获得焦点(比如，被点击)的连接上。例如：
ExampleSourceCode &&
a:link{&& &&
color:red&& &&
a:visited{&& &&
color:green&& &&
a:hover{&& &&
color:blue&& &&
a:active{&& &&
color:orange&& &&
注意：尽管CSS给予你绕开的控制权，用不同的颜色表示已经访问过的连接是一个很好的习惯，因为很多用户还是这样预期的。CSS伪类(除了hover)不常用，恐怕也没有过去常用。因此，它没有过去那样有用了。但如果你能收集用户的意见，你会发现应该使用它。传统上，连接文本是蓝色的，已访问的连接是紫色的。也许，这是最有效、最有用的颜色。然而，伴随着CSS的广泛发展，这种颜色不会是平常的了，用户也不再假设连接必须是蓝色或紫色的。你应该也可以在除了连接的其他元素上使用hover伪类。不幸的是，InternetExplore并不支持。这真是一个极大的烦恼。
伪元素实际上来说，CSS 中的伪元素在HTML上是不存在的，使用的时机通常都是针对某样元素特殊处理时才会用到常用的 pseudo-element：::first-line可以指定 p 元素第一行的样式::first-letter可以指定 p 元素第一个字的样式::selection定义使用者反白后的效果::before在元素之前插入内容::after在元素之后插入内容范例 HTML
&&&&臣亮言，先帝創業未半&&
&&&&每天，天剛亮時，我母親便把我喊醒，叫我披衣坐起。我從不知道她醒來坐了多久了。 &&
first-line and first-letter
p::first-line&{ &&
&&&&color:&red; &&
p::first-letter&{ &&
&&&&font-size:&30px; &&
selection &&
//&反白後的效果 &&
p::selection&{ &&
&&&&background:&red; &&
&&&&color:&#FFF; &&
//&Firefox &&
p::-moz-selection&{ &&
&&&&background:&red; &&
&&&&color:&#FFF; &&
伪类和伪元素的区别：首先，阅读 w3c 对两者的定义：1.CSS 伪类用于向某些选择器添加特殊的效果。2.CSS 伪元素用于将特殊的效果添加到某些选择器。可以明确两点，第一两者都与选择器相关，第二就是添加一些&特殊&的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。伪类种类
伪元素种类
区别这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。
p&i:first-child&{color:&red} &&
&&&&&i&first&/i& &&
&&&&&i&second&/i& &&
//伪类 :first-child 添加样式到第一个子元素如果我们不使用伪类，而希望达到上述效果，可以这样做：
.first-child&{color:&red} &&
&&&&&i&class=&first-child&&first&/i& &&
&&&&&i&second&/i& &&
即我们给第一个子元素添加一个类，然后定义这个类的样式。那么我们接着看看为元素：
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&&
但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。
大家感兴趣的内容
12345678910
最近更新的内容伪类和伪元素的区别
个人的关注点可能主要集中在js方向上，但是本着css也不能丢掉的原则，所以上网查了些css方面的困惑点，这一篇的主题是：伪类和伪元素。
伪类和伪元素的根本区别在于：它们是否创造了新的元素(抽象)。从我们模仿其意义的角度来看，如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，就是伪类。
最为混淆的，可能是大部分人都将 :before 和 :after 这样的伪元素随口叫做伪类，而且即使在概念混淆的情况下，实际使用上也毫无问题——因为即使概念混淆，对真正使用也不会造成多少麻烦:) CSS Selector Level 3 为了区分这两者的混淆，而特意用冒号加以区分： 伪类用一个冒号表示 :first-child 伪元素则使用两个冒号表示 ::first-line
目前为止，伪元素在一个选择器里只能出现一次，并且只能出现在末尾。实则，伪元素是选中了某个元素的符合逻辑的某个实际却不存在的部分，所以应用中也不会有人将其误写成多个。伪类则是像真正的类一样发挥着类的作用，没有数量上的限制，只要不是相互排斥的伪类，也可以同时使用在相同的元素上。
伪类的例子有：
:first-child
伪元素的例子有：
:first-line
:first-letter
没有更多推荐了，伪类、伪元素的权重
原创
 16:32:55
128
这次给大家带来伪类、伪元素的权重，使用伪类、伪元素的权重的有哪些，下面就是实战案例，一起来看一下。&!DOCTYPE html&&html lang=&en&&&head&
&meta charset=&UTF-8&&
&title&Document&/title&
margin: 0;
padding: 0;
规则1：伪类(像:hover,:visited,:active,:link)的权重和类选择器是一样的
规则2：伪元素，像before,after优先级和标签选择器是一样的(这一条了解一下，和这道题无关)
#a .b a 的权重为：(0,1,1,1)
.b a的权重为：(0,0,1,1)
a:hover的权重为：(0,0,1,1)
#a .b a 的权重最高，所以，如果有这个样式的设置，页面上的a链接是黄色的，鼠标hover上去也是黄色的
如果把#a .b a去掉，.b a的权重和a:hover的权重一致，那他们就看谁在最后面，在最后面写的会层叠掉前面的
&/style&&/head&&body&
&p class=&a& id=&a&&
&p class=&b&&&a href=&#&&我是链接&/a&&/p&
&/p&&/body&&/html&相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！相关阅读：以上就是伪类、伪元素的权重的详细内容，更多请关注php中文网其它相关文章！
江湖传言：PHP是世界上最好的编程语言。真的是这样吗？这个梗究竟是从哪来的？学会本课程，你就会明白了。
PHP中文网出品的PHP入门系统教学视频，完全从初学者的角度出发，绝不玩虚的，一切以实用、有用...
ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)－ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例，从最基本的框架常识开始，将...
本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。
《php.cn原创html5视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了HTML知识。
所有计算机语言的学习都要从基础开始，《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术，是学习PHP必须掌握的内容，任何PHP项目的实现都离不开这部分的内容，通...
本课以最新版ThinkPHP5.0.10为基础进行开发，全程实录一个完整企业点，从后台到前台，从控制器到路由的全套完整教程，不论是你是新人，还是有一定开发经验的程序员，都可以从中学到实用的知识~~
ThinkPHP是一个快速、开源的轻量级国产PHP开发框架，是业内最流行的PHP框架之一。本课程以博客系统为例，讲述如何使用TP实战开发，从中学习Thinkphp的实践应用。模版下载地址：http:/...
本课程是php实战开发课程，以爱奇艺电影网站为蓝本从零开发一个自己的网站。目的是让大家了解真实项目的架构及开发过程
本课以一个极简的PHP开发框架为案例,向您展示了一个PHP框架应该具有的基本功能，以及具体的实现方法，让您快速对PHP开发框架的底层实现有一个清楚的认识,为以后学习其实的开发框架打下坚实的基础。
javascript是运行在浏览器上的脚本语言，连续多年，被评为全球最受欢迎的编程语言。是前端开发必备三大法器中，最具杀伤力。如果前端开发是降龙十八掌，好么javascript就是第18掌：亢龙有悔。...
本站9月直播课已经结束,本套教程是直播实录,没有报上名或者漏听学员福利来了，赶紧看看吧，说不定这里就有你的菜
轻松明快，简洁生动，让你快速走入HTML5的世界，体会语义化开发的魅力
JavaScript能够称得上是史上使用最广泛的编程语言，也是前端开发必须掌握的三技能之一：描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript。本章节将帮助大家迅速掌握...
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计,它让前端开发更快速、简单，所有开发者都能快速上手...
《php用户注册登录系统》主要介绍网站的登录注册功能,我们会从最简单的实现登录注册功能开始，增加验证码，cookie验证等，丰富网站的登录注册功能
《php.cn独孤九贱（2）－css视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了CSS知识...
《PHP学生管理系统视频教程》主要给大家讲解了HTML，PHP，MySQL之间的相互协作，实现动态的网页显示和获取数据.
jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的...
《弹指间学会HTML视频教程》从最基本的概念开始讲起，步步深入，带领大家学习HTML,了解各种常用标签的意义以及基本用法，学习HTML知识为以后的学习打下基础
《最新微信小程序开发视频教程》本节课程是由微趋道录制，讲述了如何申请一个微信小程序，以及开发中需要使用哪些工具，和需要注意哪些等。
php中世界最好的语言
全栈工程师
文章总浏览数}