学习运用

上学应用:before和:after伪成分

2013/10/11 · CSS ·
CSS

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

一旦您直接密切关切着各样网页设计的博客,你大概早就注意到了:before和:after伪成分已经在前端开发中得到了一对一多的学习运用。关注。尤其是在Nicolas
Gallagher的博客中,前期运用了无数伪类成分。

亚洲必赢官网 1

尼科尔as Gallagher使用伪成分用静态的HTML标签创立84个GUI图标。

为了填补表明上述情节(和选用当前向上的倾向),我搜集一些截然在伪成分下运作的东西。本文主要针对这一类人群,即现已见到了用伪成分做出了很酷的东西,但想清楚所有关于before在css技术里的拔取。

即使css
规范中隐含其他的伪成分,我们主题是
:before 和
:after。因而,为了便利起见,我所说的“伪成分”泛指那七个特其余伪成分。

万一你直接密切关心着各样网页设计的博客,你或然早就注意到了:before和:after伪成分已经在前端开发中拿走了一对一多的关注。越发是在Nicolas
Gallagher的博客中,中期运用了过多伪类成分。

学学运用:before和:after伪成分,after伪

假定你一直密切关怀着各样网页设计的博客,你恐怕已经注意到了:before和:after伪成分已经在前端开发中收获了一对一多的关爱。越发是在尼科尔as
Gallagher的博客中,前期运用了不计其数伪类成分。

亚洲必赢官网 2

Nicolas Gallagher使用伪成分用静态的HTML标签创设84个GUI图标。

为了补偿表达上述情节(和接纳方今迈入的趋向),我搜集一些截然在伪成分下运作的东西。本文主要针对这一类人群,即现已见到了用伪元素做出了很酷的东西,但想掌握所有关于before在css技术里的运用。

即便css 规范中带有其余的伪成分,大家主旨是 :before 和
:after。由此,为了便利起见,我所说的“伪成分”泛指这三个特其他伪成分。

   
 CSS中有一个特色允许大家添加额外成分而不惊动文档自个儿,它们是以CSS选用器的款型出现的,具有标签的显示效果,可是呢又不是实在的标签成分,所以称为“伪成分”。上边就说一下科普的七个伪成分before和after。

伪成分能做什么呢?

“伪成分”,顾名思义。它创造了一个虚假的成分,并插入到指标成分内容前边或之后。

单词“pseudo”是希腊语的英译,它的骨干意思是“说谎的,不诚实的,错误的。”由此叫伪成分是适合的。因为在文档中它不实际改变什么。相反的,它们是像幽灵一般的因素插入在css中,他们对用户是可知的,可以由此css控制。

亚洲必赢官网 3

伪成分能做哪些吧?

“伪元素”,顾名思义。它创建了一个冒牌的要素,并插入到对象成分内容前面或以后。

单词“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的成分将有一个哈希符号放置内容后边,和一个句号在情节之后。

尼科尔as Gallagher使用伪成分用静态的HTML标签创立84个GUI图标。

着力语法

:before 和 :after
伪成分编码格外不难(和一大半的css属性一样不需求一大堆的前缀)。这里是一个简单易行的例子。

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

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

其次,在剧情模块中提到,伪成分倘若没有安装“content”属性,伪成分是无效的。

在那个事例中,拥有属性id的成分将有一个哈希符号放置内容前面,和一个句号在内容之后。

一、伪成分基本用法

 

     在CSS选择器中添加相应伪类选取符就足以了,像这样:#example:
before或者#example: after,那里是利用ID采用器,比如上面的CSS代码:

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

 

它的成效就是为example标签前后加上双引号。

     
和伪类的选用符很像,然则有几许小不一样,就是伪类接纳符实际上是用七个冒号,::before的样式,以和伪类不一样开,可是只用一个冒号浏览器也是足以识其余,在CSS3中规定是一个冒号就可以了。

      若是没有绑定标签,像这么::before{ content:”=”;}
这样的伪元素是从未有过意义的,代码会在DOM里的每一个元素的情节后面插入散列符号。即使你剔除了<body>标签和它的具有情节,你仍会在页面上看见八个散列符号:一个在<html>里,另一个在<body>标签里。

      那么可以如故不可以给伪成分再添加伪成分呢?比如上面那么些代码:

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

 

     
在浏览器中刷新,测试一下会发现什么也不曾展现,也就是说再给伪成分添加伪成分方今恒河沙数浏览器上是没用的,浏览器忽略掉该定义,只能够识别一层伪成分,可是既然可以伪成分添加伪元素,可以期待再为伪成分添加伪成分,其表现力是很强的。

语法笔记

您可以安装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>标签里,浏览器会自行创制哪一个。

为了填补表达上述剧情(和采用当前上扬的动向),我搜集一些通通在伪成分下运作的东西。本文首要针对这一类人群,即现已看到了用伪成分做出了很酷的事物,但想了解所有关于before在css技术里的选拔。

语法笔记

您可以设置content属性值为空,并且独自把她当做一个情节很少的盒子。像这么:

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

然则,你不得以完全的移除content属性,如若你移除了,伪成分将不会起功用。至少,content属性须求空引用作为它的值(即:content:“”)。

你可能注意到,你也得以用多少个冒号(::before 和 ::after)
写伪成分,这么些我原先研商过的。简短的解释是,对于这二种语法没有啥不相同,仅仅一点的不比是,伪成分(双冒号),css3中的伪类是(单冒号)

最后就语法而言。从技术上讲,你可以普遍的行使伪成分,不是放在杰出的成分上,像这么:

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

纵然上边是立竿见影的,不过它可怜的不算。代码会在DOM里的各样元素的内容前面插入散列符号。尽管你剔除了<body>标签和它的有所内容,你仍会在页面上看见三个散列符号:一个在<html>里,另一个在<body>标签里,浏览器会自行成立哪一个。

二、伪成分属性和体制

布置内容的性状

正如前方提及的,插入的内容在页面的源码里是不可知的。只可以在css里可知

与此同时,插入的因素在默许景况下是内联元素(或者,在html5中,在文本语义的品类里)。由此,为了给插入的因素赋予中度,填充,边距等等,你平时必须显式地定义它是一个块级成分。

那会是对什么筹划伪元素的一个概括的评释,看自个儿上面文本编辑器的那幅图

亚洲必赢官网 4

在这么些例子中,我高亮的样式将被利用到成分里插入到对象成分内容的先头和后边。

还要小心的是独占鳌头的CSS继承规则适用于插入的成分。例如,你有字种类列甲骨文,行草,无衬线字体接纳到body成分里,然后伪成分会像其它因素一样继续那几个字体系列。

一致的,伪成分不会一连没有自然继承自父成分(如 padding and
margins)的体裁。

即便css
规范中隐含任何的伪成分,大家宗旨是
:before 和
:after。由此,为了方便起见,我所说的“伪成分”泛指那多少个专门的伪成分。

陈设内容的特色

正如前方提及的,插入的剧情在页面的源码里是不可见的。只可以在css里可知

与此同时,插入的因素在默许意况下是内联成分(只怕,在html5中,在文本语义的体系里)。由此,为了给插入的成分赋予中度,填充,边距等等,你平时必须显式地定义它是一个块级成分。

那会是对哪些布署伪成分的一个简而言之明,看我上边文本编辑器的那幅图

亚洲必赢官网 5

在那个事例中,我高亮的体裁将被采纳到成分里插入到对象元素内容的日前和后边。

还要注意的是卓越的CSS继承规则适用于插入的因素。例如,你有字种类列大篆,金鼎文,无衬线字体选取到body成分里,然后伪成分会像任何因素一样继续那几个字系列列。

一律的,伪成分不会一连没有自然继承自父成分(如 padding and
margins)的体制。

1.content属性

     
每种伪成分必要求有content属性,否则的话浏览器不能够辨识,你可以为content属性添加空引用作为它的值(即:content:“”)。

     
你也可以为content包蕴一个对准一个图像的URL,似乎在css里富含一个背景图像一样:

p:before {

  content: url(image.jpg);
}

 

      也足以涵盖一个Data
URI取而代之图像引用,似乎使用css背景同样。

     
你还足以接纳ATRR(X)中的函数的样式。“把X属性的值以字符串的形式重回”,比如:

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

 

     
attr()函数的效果是把收获一定属性的值并把它作为插入的文本成为一个伪元素。

     
上面的代码会造成页面上的每个<a>成分的href值即刻被停放在每一个各自的<a>成分的末端。在文档被打印时,它能够作为一个涵盖所有URl的打印样式表。

从前或往后是怎么着?

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

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

亚洲必赢官网 6

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

伪成分能做什么呢?

“伪成分”,顾名思义。它成立了一个虚假的成分,并插入到目的成分内容后边或之后。

单词“pseudo”是希腊语的英译,它的为主意思是“说谎的,不诚实的,错误的。”因而叫伪成分是契合的。因为在文档中它不实际改变什么。相反的,它们是像幽灵一般的成分插入在css中,他们对用户是可知的,可以透过css控制。

以前或之后是哪些?

你的直觉是:before和:after伪成分或许是
插入的情节会被注入到对象元素的前或后注入。但是,正如上面提到的,不是那般的。

流入的内容将是有涉及的目的成分的子元素,但它会被安放这一个因素的其余内容的“前”或“后”。

为了求证那或多或少,看看上边的代码。首先,在HTML:

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

上边是插入伪元素的css:

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。

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

亚洲必赢官网 7

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

2.标签属性

     
伪成分也是因素,所以您可以为它助长一大半别样因素具有的质量,比如固定属性,字体属性,背景属性和盒模型的习性等,其余由于伪成分默许是内联成分,所以如果要使得盒模型中的height等属性使得的话,必须求把它转载为块成分,具体就是设置其display属性为block,大概设置为float等。如下:

#example:after{
    position: absolute;
    display: block;
    left: 20px;
    top: 20px;
    content: "\"";
    width: 20px;
    height: 20px;
    background: #6F3;
}

     
既然伪成分可以定义position等品质,那么before和after的自律就很容易了,before和after的区分只好是在平素不非凡定义伪成分的地方等新闻的时候的默许行为不同,before出现在对峙绑定的因素从前,而after出现在相持绑定的要素地方然后。

     
其它既然可以为伪成分定义盒子模型的性格,就只可以说,伪成分默许为其目的成分的子成分,比如#example:after,伪成分after的父元素就是#example选择符对应的因素,它兼具相似子成分盒模型的表征,即为他定义的height和width等品质规则为影响目的元素的规则。

插入非文本内容

自我大致的唤起,你可以把质量的值置为空字符串或是插入文本内容。你差不离有总体性的值要含有哪些的三个附加的取舍

率先,你可以涵盖一个针对性一个图像的URL,似乎在css里带有一个背景图像一样做你能做的

CSS

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

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

在意不恐怕选择引号。倘使您将URL用引号括起来,那么它会成为一个字符串和插入文本“url(image.jpg)”作为其情节,插入的而不是图像本人。

当然,你可以涵盖一个Data
URI取代图像引用,正如您可以用css背景同样。

您还能选取ATRR(X)中的函数的样式。此意义,依照规范?,“把X属性的值以字符串的款式再次回到”

上面是一个事例:

CSS

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

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

attr()函数的法力是怎样?它得到特定属性的值并把它当作插入的公文成为一个伪成分。

地点的代码会造成页面上的各种<a>成分的href值立即被放置在各种各自的<a>元素的前面。在文档被打印时,它可以视作一个富含所有URl的打印样式表。

你也可以用那些函数去获取成分的title属性,或许甚至是microdata)的值。当然,并不是兼具的例证都符合本人的其实,但按照不一样的图景,一个一定的属性值作为一个伪成分可以是实际上的

然则,获取title或然图像的alt的值并作为实际上的伪成分显示在页面上是不容许的。记住伪成分必须是被利用成分的子成分。图像,那是void(只怕是空成分),没有子成分,所以它在这一个列子中不可用,同样也适用于任何空成分,例如:<input>。

宗旨语法

:before 和 :after
伪成分编码非常不难(和半数以上的css属性一样不必要一大堆的前缀)。那里是一个简约的事例。

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

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

这些事例中涉及了两件工作,第一,大家用#example:before和#example:after来目的锁定相同的成分.严谨的说,在代码中他们是伪成分。

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

在这几个事例中,拥有属性id的要素将有一个哈希符号放置内容前边,和一个句号在内容之后。

插入非文本内容

本身不难的升迁,你可以把质量的值置为空字符串或是插入文本内容。你基本上有总体性的值要含有哪些的五个附加的选项

率先,你能够涵盖一个针对性一个图像的URL,就像是在css里带有一个背景图像一样做你能做的

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

只顾不只怕运用引号。如若你将URL用引号括起来,那么它会化为一个字符串和插入文本“url(image.jpg)”作为其内容,插入的而不是图像自个儿。

自然,你可以涵盖一个Data URI代替图像引用,正如您能够用css背景同样。

你还是可以选拔ATRR(X)中的函数的花样。此成效,依据标准?,“把X属性的值以字符串的款型再次回到”

下边是一个例证:

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

attr()函数的成效是什么样?它拿走一定属性的值并把它看成插入的公文成为一个伪成分。

上边的代码会导致页面上的逐个<a>成分的href值立时被放置在种种各自的<a>成分的背后。在文档被打印时,它可以看成一个包蕴所有URl的打印样式表。

你也足以用那个函数去得到成分的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上并不支持,假若不是很在意他们的用户数量的话,基本得以很轻易的施用啊。

可怕的浏览器包容性

其它前端技术的发展势头,第二个难点就是浏览器的协助。在那种情形之下,它不是个很大的难点。

浏览器帮衬: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版本的商海),你可以继续轻易地利用伪成分。

语法笔记

你可以设置content属性值为空,并且只是把她当做一个内容很少的盒子。像这么:

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

可是,你不可以完全的移除content属性,假使您移除了,伪成分将不会起成效。至少,content属性须要空引用作为它的值(即:content:“”)。

您恐怕注意到,你也得以用五个冒号(::before 和 ::after)
写伪元素,那么些本身先前探究过的。简短的解释是,对于那二种语法没有啥样两样,仅仅一点的两样是,伪成分(双冒号),css3中的伪类是(单冒号)

说到底就语法而言。从技术上讲,你可以大面积的使用伪成分,不是置身非凡的因素上,像这么:

:before {
  content: "#";
}

就算如此上边是行得通的,可是它那多少个的不算。代码会在DOM里的各类成分的始末前面插入散列符号。即使你剔除了<body>标签和它的持有剧情,你仍会在页面上看见两个散列符号:一个在<html>里,另一个在<body>标签里,浏览器会活动创立哪一个。

可怕的浏览器包容性

其余前端技术的发展势头,第三个难题就是浏览器的支撑。在那种场所之下,它不是个很大的题材。

亚洲必赢官网,浏览器协理: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版本的商海),你可以一连轻易地运用伪成分。

四、伪成分的功力

     那里借用Thoriq
Firdaus的多少个例证简单说一下伪成分的用法。其余伪成分既然是伪成分,那么作为社团与表现分离的一种落成,其意义应该是对文件起到很好的梳洗成效,而不是把它用来显现文本。

伪成分不是决定性的

万幸的是,贫乏伪成分不会导致大标题。半数以上情景下,伪成分一般修饰(可能支持)内容,不会给不帮忙的浏览器造成难点。所以,即使您的维护者具有较高的IE版本,你照旧可以在某种程度上选用它们。

安排内容的性状

正如前方提及的,插入的始末在页面的源码里是不可见的。只好在css里可知

再就是,插入的成分在默许情形下是内联成分(或者,在html5中,在文本语义的门类里)。由此,为了给插入的因素赋予中度,填充,边距等等,你平时必须显式地定义它是一个块级成分。

那会是对哪些规划伪成分的一个大概的证实,看自个儿上边文本编辑器的那幅图

亚洲必赢官网 8

在这些例子中,我高亮的样式将被运用到成分里插入到目的成分内容的面前和前边。

还要小心的是一级的CSS继承规则适用于插入的成分。例如,你有字种类列甲骨文,陶文,无衬线字体选用到body成分里,然后伪元素会像其余因素一样持续那几个字种类列。

一律的,伪成分不会持续没有自然继承自父成分(如 padding and
margins)的体裁。

伪成分不是决定性的

万幸的是,紧缺伪成分不会促成大题材。大多数景况下,伪成分一般修饰(大概辅助)内容,不会给不襄助的浏览器造成难点。所以,如若您的援救者具有较高的IE版本,你还是能在某种程度上运用它们。

阴影效果

使用
伪元素:before 和 :after 。它们多少个都是纯属定位,而且选择负z-index来放置到图片后方完成阴影效果。

亚洲必赢官网 9

一对提拔

正如前方提到的,伪成分不会现出在DOM中。这一个因素不是真正的要素。由此,它们不是可用的。所以,不要拔取伪成分生成内容,是您的网页的可用性和可访问性的重大。

此外一件需求记住的是,开发工具,例如火狐,不要用伪成分呈现内容。所以,假若选拔了,伪成分会导致不便有限支撑和调剂缓慢。

(更新:在评论中提到的,你可以运用谷歌(谷歌(Google))的开发工具来查阅一个伪成分相关联的风格,但不会出现在DOM成分里。同时,火狐在1.8版插足伪元素协理它。)

您所须求用部分理念是用那几个技术以创办出实用的东西。与此同时,将来尤其探讨CSS伪成分,一定要探望大家早就链接的一些小说。

翻译手语:全部翻译依照原文线路开展,并在翻译进度略加了民用对技术的领会。即使翻译有不规则之处,还烦请同行朋友指导。多谢!

赞 9 收藏
评论

亚洲必赢官网 10

事先或以后是何等?

你的直觉是:before和:after伪成分只怕是
插入的剧情会被注入到目标成分的前或后注入。不过,正如下边提到的,不是这么的。

流入的情节将是有提到的靶子成分的子成分,但它会被内置那些成分的别样内容的“前”或“后”。

为了证实这或多或少,看看上面的代码。首先,在HTML:

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

上边是插入伪成分的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;
}    

在此html里,你所看的一段文字带有的是一个类的box,还有这么的文字“Other
content”在里面(像你所会看到的一致,假使您瞧瞧了首页的源代码)。在css中,那段内容被装置了小幅,以及一些padding和可知的边框

然后大家有了伪成分。在那么些例子中,它是一个散列符号插入到该段内容前面。随后css给了它一个边框以及一些padding和margins。

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

亚洲必赢官网 11

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

一些擢升

正如前方提到的,伪成分不会并发在DOM中。那个要素不是确实的要素。因而,它们不是可用的。所以,不要选取伪元素生成内容,是您的网页的可用性和可访问性的最首要。

其它一件要求牢记的是,开发工具,例如火狐,不要用伪成分突显内容。所以,借使接纳了,伪元素会造成麻烦保险和调节缓慢。

(更新:在说三道四中涉及的,你可以行使谷歌(Google)的开发工具来查阅一个伪成分相关联的品格,但不会晤世在DOM成分里。同时,火狐在1.8版进入伪成分襄助它。)

您所须求用有些理念是用这一个技能以创建出实用的东西。与此同时,未来越发探究CSS伪成分,一定要看看我们早就链接的一些篇章。

翻译手语:凡事翻译按照原文线路开展,并在翻译进度略加了民用对技术的知道。如果翻译有畸形之处,还烦请同行朋友引导。谢谢!

如若您直接密切关心着种种网页设计的博客,你或者曾经注意到了:before和:after伪成分已经在前者开发…

3D按钮

利用伪成分结合CSS3 box-shadow
来绘制一个令人吃惊的3D按钮,仅仅使用了CSS和单一的锚文本。伪成分:before
被用来在按钮的左边添加数字“1”。

亚洲必赢官网 12

插入非文本内容

我大致的升迁,你可以把质量的值置为空字符串或是插入文本内容。你几乎有总体性的值要含有哪些的多少个附加的拔取

率先,你可以包涵一个针对一个图像的URL,似乎在css里含有一个背景图像一样做你能做的

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

注意无法选择引号。若是你将URL用引号括起来,那么它会变成一个字符串和插入文本“url(image.jpg)”作为其故事情节,插入的而不是图像本人。

本来,你能够包罗一个Data
URI代替图像引用,正如您可以用css背景同样。

您仍可以挑选ATRR(X)中的函数的款型。此功能,按照规范 ,“把X属性的值以字符串的花样再次回到”

下边是一个事例:

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

attr()函数的效益是什么?它得到一定属性的值并把它看成插入的文本成为一个伪成分。

上边的代码会促成页面上的各个<a>元素的href值立刻被停放在各样各自的<a>成分的后边。在文档被打印时,它可以用作一个富含所有URl的打印样式表。

您也可以用这一个函数去赢得成分的title属性,恐怕甚至是microdata)的值。当然,并不是颇具的例证都符合自身的实际上,但据悉差其余事态,一个特定的属性值作为一个伪成分可以是实际的

只是,获取title大概图像的alt的值并作为实际上的伪元素突显在页面上是不容许的。记住伪成分必须是被选择成分的子成分。图像,那是void(可能是空成分),没有子成分,所以它在这一个列子中不可用,同样也适用于其余空成分,例如:<input>。

叠加图像效果

利用伪成分来单独倚重一个图片标签创造一个“凌乱的”叠加图像效果也是唯恐的。伪成分用于建立一个图形叠加的错觉,通过行使z-index负值使“叠加”的图片在真正的图片前面来落到实处。

亚洲必赢官网 13

 

可怕的浏览器包容性

其余前端技术的发展势头,首个难题就是浏览器的辅助。在那种场合之下,它不是个很大的题材。

浏览器帮忙: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伪成分,一定要看看大家早就链接的部分稿子。
 

 

 

本文转自:

英文原文:

汉语译文:

由大漠根据Shay
Howe的《An Adavnced Guide to HTML &
CSS》第二课《Detailed
Positioning》所译。

网站地图xml地图