http://www.web008.net

学习使用

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

2013/10/11 · CSS · CSS

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

假令你平素紧凑关心着各个网页设计的博客,你恐怕已经注意到了:before和:after伪成分已经在前端开拓中获得了一定多的关注。极其是在Nicolas Gallagher的博客中,早先时期运用了大多伪类成分。

图片 1

Nicolas Gallagher使用伪成分用静态的HTML标签创设捌10个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中的伪类是(单冒号卡塔 尔(英语:State of Qatar)

聊起底就语法来说。从手艺上讲,你能够大规模的行使伪成分,不是身处卓越的因素上,像这么:

CSS

:before { content: "#"; }

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

虽说上面是可行的,但是它不行的无效。代码会在DOM里的种种成分的原委前边插入散列符号。尽管你剔除了<body>标签和它的保有剧情,你仍会在页面上看见七个散列符号:三个在<html>里,另四个在<body>标签里,浏览器会活动制造哪四个。

布置内容的特色

正如前方谈到的,插入的原委在页面包车型地铁源码里是不可以见到的。只可以在css里可以预知

再者,插入的成分在暗中同意意况下是内联元素(或者,在html5中,在文本语义的系列里卡塔 尔(英语:State of Qatar)。因而,为了给插入的要素赋予中度,填充,边距等等,你平凡必得显式地定义它是叁个块级元素。

那会是对怎么着安排伪成分的二个粗略的印证,看自己上面文本编辑器的这幅图

图片 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”在其间(像你所寻访到的等同,要是您瞧瞧了首页的源代码卡塔 尔(英语:State of Qatar)。在css中,这段内容被设置了大幅度,以至部分padding和可以知道的边框

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

这里是浏览器中查阅的结果:

图片 3

外面包车型客车盒子是这么些段子。围绕有散列符号的边框表示伪成分的界限。所以,不是插入“before”到段落,而是伪成分被置于到此段子的“Other content”的近年来。

插入非文本内容

自己总结的提醒,你可以把品质的值置为空字符串或是插入文本内容。你基本上有质量的值要包蕴怎么着的七个附加的选项

首先,你能够蕴含一个针对性八个图像的UCR-VL,就如在css里带有三个背景图像同样做你能做的

CSS

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

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

只顾无法利用引号。假若您将U智跑L用引号括起来,那么它会成为多个字符串和插入文本“url(image.jpg)”作为其内容,插入的实际不是图像本身。

自然,你能够蕴涵叁个Data URI代替图像引用,正如你能够用css背景相仿。

您还足以筛选AT景逸SUV本田CR-V(X)中的函数的样式。此功效,依照规范?,“把X属性的值以字符串的款型再次来到”

下边是一个事例:

CSS

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

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

attr(卡塔 尔(英语:State of Qatar)函数的意义是何等?它赢得特定属性的值并把它看作插入的公文成为贰个伪成分。

地点的代码会变成页面上的每叁个<a>成分的href值登时被放置在每个各自的<a>元素的末端。在文书档案被打字与印刷时,它能够视作贰个蕴涵全体UCR-Vl的打字与印刷样式表。

您也足以用这一个函数去获取成分的title属性,大概以致是microdata)的值。当然,并非具备的例子都合乎自个儿的莫过于,但依赖分歧的动静,二个特定的属性值作为一个伪成分能够是事实上的

只是,获取title大概图像的alt的值并作为实际上的伪成分展现在页面上是相当的小概的。记住伪成分必须是被应用成分的子成分。图像,那是void(大概是空成分),没有子成分,所以它在此个列子中不可用,相似也适用于此外空成分,举个例子:<input>。

可怕的浏览器宽容性

别的前端本事的发展趋向,第1个问题正是浏览器的支撑。在这里种景色之下,它不是个极大的标题。

浏览器协助: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中。那些要素不是真的的成分。由此,它们不是可用的。所以,不要选择伪成分生成内容,是您的网页的可用性和可访谈性的十分重要。

除此以外豆蔻梢头件需求深深记住的是,开采工具,比方火狐,决不用伪成分展现内容。所以,假使利用了,伪元素会诱致不便维护和调弄收拾缓慢。

(更新:在评论中关系的,你能够应用谷歌的开拓工具来查阅一个伪元素相关联的品格,但不会出未来DOM成分里。同临时间,火狐在1.8版加盟伪成分协助它。卡塔尔

您所急需用某些思想是用那些工夫以创办出实用的东西。与此同期,以往更为研讨CSS伪成分,应当要探问我们已经链接的黄金时代部分篇章。

翻译手语:一切翻译根据原版的书文线路开展,并在翻译进度略加了个人对本事的接头。若是翻译有异形之处,还烦请同行朋友指导。多谢!

赞 9 收藏 评论

图片 4

郑重声明:本文版权归美高梅163888所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。