广告 ·ultimatecourses.com
<一个rel="nofollow noopener" href="https://ultimatecourses.com/courses/angular?ref=14">用终极课程学习Angular的正确方法”></一个></div><一个rticle class=

CSS3属性内容

CSS3内容属性对于将内容插入伪元素之前的::和之后的::非常有价值。正如Mozilla开发者网络所说:

内容属性与<一个title="" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before" target="_blank">::之前和<一个title="" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::after" target="_blank">后::伪元素来生成元素中的内容。”

的<一个href=”https://developer.mozilla.org/en-US/docs/Web/CSS/content" target="_blank">内容属性使我们能够插入生成的内容。内容包括:

  • 字符串值。<李>用于显示图像的URI。<李>元素的属性值。<李>引号(开引号和闭引号)。

此外,<一个href=”http://caniuse.com/" target="_blank">内容属性被所有主流浏览器广泛支持

我认为其中最有价值的是能够插入字符串值。让我们看一些使用content属性和属性的示例::之前后::伪元素。

清晰的

在CSS3之前为了<一个href=”https://developer.mozilla.org/en-US/docs/Web/CSS/clear" target="_blank">清晰的浮我们在DOM中添加了一个额外的元素。

<风格>.clear{清晰的:这两个;}风格><div=内容><div=pull-left>左浮动div><div=>浮动对吧div><div=清晰的>div>div>

虽然这仍然适用于CSS1和CSS2,但我们可以简单地将一个类应用于.content元素清除浮点数。下面是清除浮动元素的代码:

.clear{&::之前、&:之后{内容:' ';显示:表格;}&::{清晰的:这两个;}}

这里是HTML伴随我们的更少的代码:

<div=内容><div=pull-left>左浮动div><div=>浮动对吧div>div>

面包屑

使用content属性创建面包屑允许我们使用非常简单的HTML标记,通过CSS添加必要的分隔符。同样,我使用LESS预编译器来编译我的CSS。

这里是模板HTML:

<ol=面包屑><><一个href=/>首页一个>><><一个href=/ foo>喷火一个>><><一个href=/ foo / bar>酒吧一个>><>在这里>ol>
ol.breadcrumb{list-style:没有一个;&::之前、&:之后{内容:' ';显示:表格;}&::{清晰的:这两个;}>李{浮动:;颜色:# 999;& +李::{内容:“& # 92;& # 48;03 e”;填充:6 0 px;}>一个{颜色:# 666;}}}

看到这支笔<一个href=”http://codepen.io/blove/pen/eNwEoj/">eNwEoj作者:yobet外围Brian Love (<一个href=”http://codepen.io/blove">@blove)<一个href=”http://codepen.io">CodePen

非拉丁字符

任何非拉丁字母字符都必须进行编码。编码是前面有一个反斜杠的十六进制值,例如:0020年\

在上面的示例中,我对大于号使用了十六进制值20。有一些简单的方法可以计算出合适的值:

布莱恩F爱

嗨,我是布莱恩。我对TypeScript, Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了,我住在波特兰,我经常滑雪。