CSS伪类与CSS伪元素的差别及来历实际表明

日期:2021-03-11 类型:科技新闻 

关键词:抠图软件电脑版,在线图片加水印,在线 抠图,在线画图网站,淘宝做图片用什么软件好

有关二者的差别,实际上是很古老的难题。可是直到现在,因为各种各样互联网误传和1些不承担责任的书本误笔,依然有非常多的人将伪类与伪元素混为1谈,乃至不乏许多CSS老手。早些年刚入行的情况下,我自身也被深深误导,由于论坛里的帖子大多数不关注这类定义的微小区别,即便有人出来讲1句:“这两个是不一样的”,也只是被更多的帖子吞没掉罢了。因此感觉必须写下这些我所知的一部分,这里侧重写的是为何这二者不一样,和1些平常非常容易错过了的细节。

不管是伪类還是伪元素,都属于CSS挑选器的范围。因此它们的界定能够在CSS规范的挑选器章节寻找。各自是 CSS2.1 Selectors 和 CSS Selector Level 3,二者都早已是强烈推荐规范。
规范的界定

在CSS2.1里,5.10 Pseudo-elements and pseudo-classes 叙述了这两个定义的来历,它们是被1同提及的。但到了 Selector Level 3 里,它们就被分开到两个小标题里加以区别。但不管怎样,伪类和伪元素的引进全是由于在文本文档树里一些信息内容没法被充足叙述,例如CSS沒有“段落的第1行”之类的挑选器,而这在1些出版发行情景里又是务必的。用规范里的话说:
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
简易汉语翻译1下,便是:
CSS 引进伪类和伪元素的定义是以便完成根据文本文档树以外的信息内容的文件格式化
这么说很抽象性,实际上便是以便叙述1些现有CSS没法叙述的物品。缺乏甚么,则引进甚么,无论是规范,還是人,全是这般发展而来。

伪类与伪元素的差别
这里我大能够列1个报表,把全部的伪类和伪元素分开列举,但这未免太方式化,与其记牢“哪些是哪些并不是”,比不上真实地加以区别。伪类和伪元素自身就有1个压根的不一样的地方,这点立即反映在了规范的叙述句子上。
先看1个伪元素 first-line 事例。如今有1段HTML,內容是1个段落:

拷贝编码
编码以下:

<p>I am the bone of my sword. Steel is my body, and fire is my blood.
I have created over a thoustand blades.
Unknown to Death.Nor known to Life. Have withstood pain to create many weapon.
Yet, those hands will never hold anything. So as I pray, unlimited blade works.</p>

假如我要叙述这个段落的第1行,在无需伪元素的状况下,我会如何做?想来我1定要嵌套循环1层 span,随后再加类名:

拷贝编码
编码以下:

<p><span class="first-line">I am the bone of my sword. Steel is my body, and fire is my blood. </span>
I have created over a thoustand blades.
Unknown to Death.Nor known to Life. Have withstood pain to create many weapon.
Yet, those hands will never hold anything. So as I pray, unlimited blade works.</p>

再反观1个伪类 first-child 的事例,有1个简易的目录:

拷贝编码
编码以下:

<ul>
<li></li>
<li></li>
</ul>

假如我要叙述 ul 的第1个元素,我不必嵌套循环新的元素,我只须给第1个早已存在的 li 加上1个类名便可以了:

拷贝编码
编码以下:

<ul>
<li class="first-child"></li>
<li></li>
</ul>

虽然,第1行和第1个元素,这二者的语意类似,但最终功效的实际效果却彻底不一样。因此,伪类和伪元素的压根差别在于:它们是不是造就了新的元素(抽象性)。从大家效仿其实际意义的角度看来,假如必须加上新元素加以标志的,便是伪元素,反之,假如只必须在既有元素上加上种别的,便是伪类。而这也是为何,规范精准地应用 “create” 1词来解释伪元素,而应用 “classify” 1词来解释伪类的缘故。1个叙述的是新建立出来的“鬼魂”元素,另外一个则是叙述早已存在的合乎“鬼魂”种别的元素。

伪类1刚开始单是只是用来表明1些元素的动态性情况,典型的便是连接的各个情况(LVHA)。接着CSS2规范拓展了其定义范畴,使其变成了全部逻辑性上存在但在文本文档树中却不必标志的“鬼魂”归类。
伪元素则意味着了某个元素的子元素,这个子元素尽管在逻辑性上存在,但却其实不具体存在于文本文档树中。

伪类和伪元素搞混的来历
最为搞混的,将会是绝大多数人都将 :before 和 :after 这样的伪元素随意叫做伪类,并且即便在定义搞混的状况下,具体应用上也没什么难题——由于即便定义搞混,对真实应用也不容易导致是多少不便:)
CSS Selector Level 3 以便区别这二者的搞混,而特地用冒号加以区别:
伪类用1个冒号表明 :first-child
伪元素则应用两个冒号表明 ::first-line

而且要求,访问器既要适配CSS1和2里既存的伪元素的单冒号表明,另外又要兼容问题CSS3新引进的伪元素的单冒号表明。后来的結果大伙儿都了解,由于低版本号IE对双冒号的适配难题,基本上全部的CSSer在写款式的情况下都不谋而合的应用了单冒号。这无形中中,让这类搞混延续了下来。而CSS3新伪元素的应用到现阶段为止,还远远不了气侯。

伪类和伪元素应用上必须留意的地区
搞清楚其不一样以后,就必须留意和考虑到在具体应用上的1些难题。例如:伪类和伪元素的挑选器独特性(优先选择级)怎样测算?
我在以前的 CSS挑选器间距不相干 1文中,汉语翻译过CSS规范的测算挑选器的独特性这1一部分,看完那一部分,回答就清晰了:除否定伪类的独特要求外,分开各有做为真实的类和元素测算。
尽管规范之后的版本号将会会容许挑选器多伪元素的状况,但就现阶段为止,伪元素在1个挑选器里只能出現1次,而且只能出現在结尾。实则,伪元素是选定了某个元素的合乎逻辑性的某个具体却不存在的一部分,因此运用中也不容易有人将其误写成好几个。伪类则是像真实的类1样充分发挥着类的功效,沒有数量上的限定,要是并不是互相抵触的伪类,还可以另外应用在同样的元素上。有关CSS3挑选器的详尽解释,强烈推荐 rogerjohansson 的 CSS 3 selectors explained。

完毕语
原本只是想稍稍写点,不想话又多了…到了最终,我1度感觉自身还漏了许多,持续在脑海里检索,但将会只能下一次在填补了。写这篇的目地是为下篇《CSS伪类与CSS伪元素的典型运用》做个铺垫,不想基础理论的物品1写自身就刚开始空话连篇了,愧疚…回看本篇,自身的思路跳的一些乱了,飘飘洒洒这么多字,将会归纳起来没几句话,但假如期待尽量表述清晰,则又在所难免冗余过头。基础理论一直显得枯燥乏味了些,下篇闲聊运用应当不至于这么低沉:)
上一篇:手机上网站建设 返回下一篇:没有了