您的位置:时时app平台注册网站 > web前端 > 学学生运动用:before和:after伪元素【彩世界网址】

学学生运动用:before和:after伪元素【彩世界网址】

2019-10-11 04:37

可怕的浏览器宽容性

其他前端本事的发展势头,第3个难题便是浏览器的支持。在这里种地方之下,它不是个非常大的难题。

浏览器补助:before 和 :after 伪成分栈,像这么:

  • Chrome 2 ,
  • Firefox 3.5 (3.0 had partial support),
  • Safari 1.3 ,
  • Opera 9.2 ,
  • IE8 (with some minor bugs),
  • 大概全部的位移浏览器。

独一真正的主题素材是未曾取得协理的(不用奇怪)IE6和IE7。所以,借令你的爱好者是在大好合适的web开垦(或许其余兼具十分低IE版本的商海),你能够传承轻便地应用伪成分。

事先或之后是什么?

您的直觉是:before和:after伪元素恐怕是 插入的剧情会被注入到对象成分的前或后注入。可是,正如上面提到的,不是那般的。

流入的原委将是有提到的对象成分的子成分,但它会被停放这么些因素的别样内容的“前”或“后”。

为了印证这或多或少,看看上边包车型地铁代码。首先,在HTML:

XHTML

<p class="box">Other content.</p>

1
<p class="box">Other content.</p>

下边是插入伪成分的css:

CSS

p.box { width: 300px; border: solid 1px white; padding: 20px; } p.box:before { content: "#"; border: solid 1px white; padding: 2px; margin: 0 10px 0 0; }

1
2
3
4
5
6
7
8
9
10
11
12
p.box {
  width: 300px;
  border: solid 1px white;
  padding: 20px;
}
 
p.box:before {
  content: "#";
  border: solid 1px white;
  padding: 2px;
  margin: 0 10px 0 0;
}

在那html里,你所看的一段文字带有的是贰个类的box,还应该有如此的文字“Other content”在内部(像你所会看出的均等,如若您见到了首页的源代码)。在css中,这段内容被设置了步长,以至一些padding和可以知道的边框

然后大家有了伪成分。在此个事例中,它是一个散列符号插入到该段内容前边。随后css给了它贰个边框以至部分padding和margins。

此处是浏览器中查看的结果:

彩世界网址 1

外边的盒子是其一段子。围绕有散列符号的边框表示伪成分的边界。所以,不是插入“before”到段落,而是伪成分被安放到此段子的“Other content”的日前。

布置非文本内容

自个儿归纳的提示,你可以把质量的值置为空字符串或是插入文本内容。你基本上有总体性的值要含有怎么样的四个附加的取舍

首先,你能够包罗二个针对三个图像的U智跑L,就如在css里含有一个背景图像同样做你能做的

CSS

p:before { content: url(image.jpg); }

1
2
3
p:before {
  content: url(image.jpg);
}

留意不可能应用引号。假诺您将USportageL用引号括起来,那么它会变成一个字符串和插入文本“url(image.jpg)”作为其剧情,插入的并不是图像本身。

理所必然,你能够分包一个Data URI替代图像引用,正如您能够用css背景同样。

你还足以挑选ATTucson哈弗(X)中的函数的款型。此效率,依照规范?,“把X属性的值以字符串的样式重返”

上边是一个事例:

CSS

a:after { content: attr(href); }

1
2
3
a:after {
  content: attr(href);
}

attr()函数的效果与利益是什么样?它获得一定属性的值并把它看作插入的公文成为三个伪成分。

地方的代码会导致页面上的各类<a>成分的href值立刻被停放在每一个各自的<a>成分的背后。在文书档案被打字与印刷时,它能够用作八个富含全部U凯雷德l的打字与印刷样式表。

您也足以用那些函数去获得成分的title属性,或许乃至是microdata)的值。当然,并非所有事例都合乎自个儿的莫过于,但传说差别的事态,贰个一定的属性值作为贰个伪成分能够是实际上的

唯独,获取title可能图像的alt的值并作为实际上的伪成分显示在页面上是不容许的。记住伪元素必得是被应用成分的子成分。图像,那是void(可能是空成分),未有子成分,所以它在此个列子中不可用,同样也适用于此外空成分,比方:<input>。

主干语法

:before 和 :after 伪成分编码特别轻巧(和比很多的css属性同样无需一大堆的前缀)。这里是一个简约的事例。

CSS

#example:before { content: "#"; } #example:after { content: "."; }

1
2
3
4
5
6
7
#example:before {
  content: "#";
}
 
#example:after {
  content: ".";
}

本条事例中涉及了两件业务,第一,我们用#example:before和#example:after来目的锁定一样的成分.严苛的说,在代码中他们是伪成分。

第二,在内容模块中涉及,伪成分若无安装“content”属性,伪元素是低效的。

在这里个事例中,具有属性id的成分将有一个哈希符号放置内容前边,和贰个句号在内容之后。

伪成分能做什么呢?

“伪成分”,一面之识。它创制了多个假冒伪造低劣的因素,并插入到对象成分内容前边或之后。

单词“pseudo”是希腊语的英译,它的主导意思是“说谎的,不诚实的,错误的。”由此叫伪成分是顺应的。因为在文书档案中它不实际改动什么。相反的,它们是像幽灵经常的成分插入在css中,他们对客商是可以见到的,能够透过css调节。

语法笔记

你可以安装content属性值为空,而且独自把她作为多个剧情非常少的盒子。像那样:

CSS

#example:before { content: ""; display: block; width: 100px; height: 100px; }

1
2
3
4
5
6
#example:before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
}

唯独,你不得以完全的移除content属性,要是您移除了,伪成分将不会起功能。最少,content属性要求空援引作为它的值(即:content:“”)。

您恐怕注意到,你也足以用四个冒号(::before 和 ::after) 写伪成分,这么些笔者先前研究过的。简短的分解是,对于这几种语法未有啥分化,仅仅一点的不一致是,伪成分(双冒号),css3中的伪类是(单冒号)

谈到底就语法来讲。从本领上讲,你能够大范围的使用伪成分,不是位于出色的要素上,像那样:

CSS

:before { content: "#"; }

1
2
3
:before {
  content: "#";
}

尽管如此上边是一蹴而就的,但是它那些的失效。代码会在DOM里的每一个成分的开始和结果前边插入散列符号。就算你剔除了<body>标签和它的具备剧情,你仍会在页面上见到多个散列符号:三个在<html>里,另三个在<body>标签里,浏览器会自行创造哪一个。

有个别晋升

正如前方提到的,伪成分不会出现在DOM中。这么些因素不是当真的要素。因而,它们不是可用的。所以,不要接纳伪元素生成内容,是你的网页的可用性和可访谈性的着重。

除此以外一件须要牢记的是,开拓工具,比如火狐,而不是用伪成分呈现内容。所以,假使应用了,伪成分会促成难以维护和调弄整理缓慢。

(更新:在评论中关系的,你能够利用谷歌(Google)的开采工具来查阅贰个伪成分相关联的作风,但不会油不过生在DOM成分里。同有的时候候,火狐在1.8版参加伪元素扶持它。)

您所须求用部分思想是用那一个技巧以创制出实用的东西。与此相同的时候,以往非常商量CSS伪成分,不可不看看大家曾经链接的一对小说。

翻译手语:全体翻译依据原来的小说线路开展,并在翻译进度略加了私家对技艺的知情。要是翻译有畸形之处,还烦请同行朋友教导。感激!

赞 9 收藏 评论

彩世界网址 2

插入内容的特色

正如前方聊到的,插入的开始和结果在页面包车型地铁源码里是不可知的。只可以在css里可以见到

再便是,插入的成分在私下认可情状下是内联成分(或者,在html5中,在文本语义的档期的顺序里)。由此,为了给插入的因素赋予中度,填充,边距等等,你平时必得显式地定义它是二个块级元素。

那会是对如何统一计划伪成分的叁个简便的求证,看自身上边文本编辑器的那幅图

彩世界网址 3

在这里个例子中,笔者高亮的样式将被采取到成分里插入到对象成分内容的前头和后边。

还要注意的是第一级的CSS承继准则适用于插入的要素。举个例子,你有字体系列金鼎文,陶文,无衬线字体选拔到body成分里,然后伪成分会像任何因素同样持续那几个字连串列。

同样的,伪成分不会接二连三未有自然承袭自父成分(如 padding and margins)的体裁。

伪元素不是决定性的

幸运的是,贫乏伪成分不会促成大难题。大很多动静下,伪元素通常修饰(只怕扶助)内容,不会给不帮助的浏览器形成难点。所以,假设你的跟随者具有较高的IE版本,你还是可以在某种程度上运用它们。

读书使用:before和:after伪成分

2013/10/11 · CSS · CSS

原稿出处: smashingmagazine   译文出处:w3cplus-胡均   

只要你直接紧凑关心着种种网页设计的博客,你或然早已注意到了:before和:after伪元素已经在前端开辟中赢得了一对一多的关注。特别是在Nicolas Gallagher的博客中,后期运用了大多伪类成分。

彩世界网址 4

Nicolas Gallagher使用伪成分用静态的HTML标签创建八十几个GUILogo。

为了填补表达上述剧情(和采纳目前进步的可行性),作者访谈一些一心在伪成分下运维的东西。本文首要针对这一类人群,即现已见到了用伪成分做出了很酷的东西,但想清楚全体关于before在css手艺里的行使。

即使css 标准中蕴藏别的的伪成分,大家宗旨是 :before 和 :after。因而,为了便利起见,笔者所说的“伪成分”泛指那多少个特地的伪成分。

本文由时时app平台注册网站发布于web前端,转载请注明出处:学学生运动用:before和:after伪元素【彩世界网址】

关键词: