>

学习使用

- 编辑:至尊游戏网站 -

学习使用

学习使用:before和:after伪成分

2013/10/11 · CSS · CSS

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

如果您一向紧凑关切着各类网页设计的博客,你可能曾经注意到了:before和:after伪成分已经在前端开垦中赢得了一定多的关注。特别是在Nicolas Gallagher的博客中,中期运用了大多伪类成分。

至尊游戏网站 1

尼古Russ Gallagher使用伪成分用静态的HTML标签创制八十三个GUILogo。

为了补偿表明上述情节(和接受近年来行步的大势),笔者搜求一些截然在伪元素下运作的东西。本文首要针对这少年老成类人群,即现已观察了用伪成分做出了很酷的东西,但想清楚全体有关before在css手艺里的施用。

纵然css 标准中包罗别的的伪成分,大家主旨是 :before 和 :after。因而,为了方便起见,小编所说的“伪元素”泛指那八个特意的伪成分。

伪元素能做如何吗?

“伪成分”,看名就会猜到其意义。它创立了一个假冒伪劣的因素,并插入到对象成分内容前边或之后。

单词“pseudo”是希腊语的英译,它的骨干意思是“说谎的,不诚实的,错误的。”因而叫伪成分是顺应的。因为在文书档案中它不实际改造什么。相反的,它们是像幽灵平时的因素插入在css中,他们对客商是可以知道的,能够透过css调整。

着力语法

: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的要素将有三个哈希符号放置内容前边,和三个句号在剧情之后。

至尊游戏网站,语法笔记

您能够安装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>标签里,浏览器会活动成立哪叁个。

安顿内容的风味

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

何况,插入的因素在暗中同意情状下是内联成分(或者,在html5中,在文本语义的类型里)。因而,为了给插入的要素付与高度,填充,边距等等,你经常必得显式地定义它是一个块级成分。

这会是对怎么着两全伪成分的三个轻易易行的证实,看本人上面文本编辑器的这幅图

至尊游戏网站 2

在此个例子中,作者高亮的体裁将被使用到成分里插入到目的元素内容的前头和前面。

还要小心的是一级的CSS承接法则适用于插入的因素。举例,你有字类别列大篆,宋体,无衬线字体选拔到body成分里,然后伪成分会像别的因素同样持续那几个字种类列。

相近的,伪成分不会持续未有自然承继自父成分(如 padding and margins)的体制。

前面或之后是什么?

您的直觉是: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。

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

至尊游戏网站 3

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

计划非文本内容

自己差不离的晋升,你能够把性能的值置为空字符串或是插入文本内容。你基本上有品质的值要含有哪些的多个附加的接受

先是,你能够包涵贰个对准多个图像的U锐界L,就好像在css里包罗一个背景图像相似做你能做的

CSS

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

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

瞩目不可能运用引号。如若你将UQX56L用引号括起来,那么它会化为多少个字符串和插入文本“url(image.jpg)”作为其内容,插入的并非图像自身。

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

你仍然是能够选择AT奔驰M级安德拉(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 伪成分栈,像那样:

  • 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版本的商海),你能够三番五次轻便地运用伪成分。

伪成分不是决定性的

凑巧的是,贫乏伪成分不会导致大题目。大许多景色下,伪成分经常修饰(可能扶助)内容,不会给不扶植的浏览器形成难点。所以,倘诺您的跟随者具备较高的IE版本,你还能够在某种程度上使用它们。

局部唤起

正如前方提到的,伪成分不会出今后DOM中。这个要素不是真的的成分。因而,它们不是可用的。所以,不要选择伪成分生成内容,是您的网页的可用性和可访谈性的最首要。

除此以外风姿罗曼蒂克件需求深深记住的是,开辟工具,比方火狐,绝不用伪成分显示内容。所以,若是运用了,伪成分会促成难以维护和调试缓慢。

(更新:在评论中涉嫌的,你能够采纳Google的开采工具来查看三个伪元素相关联的风格,但不会并发在DOM成分里。同不经常间,火狐在1.8版投入伪成分援救它。)

您所急需用一些观念是用那么些技能以成立出实用的东西。与此同时,以往越来越切磋CSS伪成分,必定要拜望我们早就链接的局地小说。

翻译手语:整整翻译依据原作线路开展,并在翻译进程略加了民用对技艺的领会。假使翻译有不法规之处,还烦请同行朋友指引。多谢!

赞 9 收藏 评论

至尊游戏网站 4

本文由软件综合发布,转载请注明来源:学习使用