返回首页 |

合作共赢、快速高效、优质的网站建设提供商

更多精品源码-尽在织梦模板-www.moke8.com

了解伪元素 :before 和 :after

时间:2017-08-15 编辑:admin

层叠款式表(CSS)的首要意图是给HTML元素增加款式,可是,在一些事例中给文档增加额定的元素是剩余的或是不可能的。事实上CSS中有一个特性答应我们增加额定元素而不打乱文档自身,这就是“伪元素”。

你必定听说过这个词,尤其是当你一向重视着我们的教程。点此阅读原作者的其他文章

事实上,的确有一些CSS宗族的成员(CSS挑选器)被分类为伪元素比方::first-line, :first-letter, ::selection, :before and :after。可是,就本文而言,我们将把我们评论的规模约束在:before 和 :after这两个元素上。因而,本文中的“伪元素”将特指这两个伪元素(:before 和 :after),我们将从根底下手,来研讨这个共同的主题。

关于语法和阅读器支撑

伪元素实践上在CSS1中就存在了,可是我们现在所评论的:before和:after则发布于CSS2.1中。在开始,伪元素的语法是运用“:”(一个冒号),跟着web的开展,在CSS3中修订后的伪元素运用“::”(两个冒号),也就是::before 和 ::after—以区别伪元素和伪类(比方:hover,:active等)

可是,不管你运用单冒号仍是双冒号,阅读器都将能辨认它们。因为IE8只支撑单冒号的格局,安全起见如果你想要更广泛的阅读器兼容性那么仍是运用单冒号的格局吧!

它是做什么的

简而言之,伪元素将会在内容元素的前后刺进额定的元素,因而当我们增加它们时,运用以下的符号方法,他们在技能上是对等的。

<p><span>:before</span>Thisthemaincontent.<span>:after</span></p>

可是这些元素实践上并不在文档中生成。它们将在外部可见,可是你将不会在文档的源代码中找到它们,因而,实践上它们是“虚伪”的元素。

运用伪元素

运用伪元素是相对简单的,:before将会在内容之前“增加”一个元素而:after将会在内容后“增加”一个元素。在它们之中增加内容我们能够运用content特点。

举例来说,下面的代码片段将在引证的之前和之后别离增加增加一个引号。

blockquote:before{content:open-quote;}blockquote:after{content:close-quote;}

伪元素款式

虽然作为“虚伪”的元素,事实上伪元素体现上就像是“真实”的元素,我们能够给它们增加任何款式,比方改动它们的色彩、增加布景色、调整字体大小、调整它们中的文本等等。

blockquote:before{content:open-quote;font-size:24pt;text-align:center;line-height:42px;color:#fff;background:#ddd;float:left;position:relative;top:30px;}blockquote:after{content:close-quote;font-size:24pt;text-align:center;line-height:42px;color:#fff;background:#ddd;float:right;position:relative;bottom:40px;}

指定伪元素尺度

因为现已设置float,所以无需设置display:black。

blockquote:before{content:open-quote;font-size:24pt;text-align:center;line-height:42px;color:#fff;background:#ddd;float:left;position:relative;top:30px;border-radius:25px;height:25px;width:25px;}blockquote:after{content:close-quote;font-size:24pt;text-align:center;line-height:42px;color:#fff;background:#ddd;float:right;position:relative;bottom:40px;border-radius:25px;height:25px;width:25px;}

相关布景图画

我们也能够替换用图片替换内容而不是只要纯文本。虽然content特点供给了 url()来刺进图片, 可是在更多的实例中,我更倾向于运用布景(background)特点然后更好的操控图片。

blockquote:before{content:"";font-size:24pt;text-align:center;line-height:42px;color:#fff;float:left;position:relative;top:30px;border-radius:25px;background:url(images/quotationmark.png)-3px-3px#ddd;display:block;height:25px;width:25px;}blockquote:after{content:"";font-size:24pt;text-align:center;line-height:42px;color:#fff;float:right;position:relative;bottom:40px;border-radius:25px;background:url(images/quotationmark.png)-1px-32px#ddd;display:block;height:25px;width:25px;}

可是,正如你能够从上面的代码片段中看到的,我们依旧声明晰content特点,并且此刻运用了空字符串。content特点是有必要的并且应该经常被运用。不然,伪元素不管怎么都无法正常作业。

结合伪类

虽然有不同类型的伪X(伪元素、伪类),我们能够运用伪类连同伪元素一同放入一个CSS规矩中,例如,如果我们期望当我们的鼠标移到blockqoute上时,引号的布景色能够稍微变深。

blockquote:hover:after,blockquote:hover:before{background-color:#555;}

增加过渡作用

我们乃至能够在伪元素上运用transition特点来创立美丽的色彩过渡作用。

transition:all350ms;-o-transition:all350ms;-moz-transition:all350ms;-webkit-transition:all350ms;

更多的创意

为了激起你的创意,我们现已挑选了三个很帅的比方,能够在web规划上给你许多主见。

诱人的暗影(http://www.paulund.co.uk/creating-different-css3-box-shadows-effects)

在这个教程中 Paul Underwood 解说了怎么创立愈加传神和吸引人的暗影作用。

运用 伪元素:before 和 :after 。它们两个都是肯定定位,并且运用负z-index来放置到图片后方完成暗影作用。

3D按钮

这是一个十分聪明的完成,运用伪元素结合CSS3 box-shadow 来制作一个令人吃惊的3D按钮,只是运用了CSS和单一的锚文本。伪元素:before 被用来在按钮的左边增加数字“1”。

叠加图画作用

运用伪元从来只是依托一个图片标签创立一个“杂乱的”叠加图画作用也是可能的。伪元素用于树立一个图片叠加的幻觉,经过运用z-index负值使“叠加”的图片在真实的图片后边来完成。

定论

伪元素很帅一起也是可运用到实践作业中的,基本上,每一个我们所增加的元素都不会搅扰现有的HTML结构,并且伪元素能够做到 简直一切我们能想到的工作。

实践上有一些伪元素的改善作业,现在逐渐进行,比方伪元素嵌套div::before::before { content: ”; }以及多重伪元素div::before(3) { content: ”; }。很显然,在未来的web规划中,这些改善会让我们的规划有更多的方式(更多的可能性)。可是,他们将会在最新的阅读器中得到支撑,让我们现在耐性的等候吧!

【修改引荐】

现代前端开发技能栈前端模板的原理与完成前端功能优化以及解决方案现代前端开发技能栈前端完成文件的断点续传
浏览:

网站建设

流程

    网站建设流程