詳解 CSS的 content 屬性

小云云原創: 2017-12-04 09:38:534684瀏覽

在前端开发中，css是我们必定会使用到的语言，本文我们主要和大家一起学习 content属性. CSS的 content 属性需要在 ::before和::after 伪类元素中使用. 属性会在页面上生成content中的内容,当然需要您的浏览器支持这个属性.

content 属性的基本语法.

content 属性的表现形式就如下所写,这里列出了每一个属性的值.

p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}

这个与CSS中的稍有不同,例如在::before或者::after中使用 attr(),你需要写如下方式的代码:

p::after {
  content: " (" attr(title) ")";
}

这里只是一个例子,更多的在后面.下面我们将讨论每一个值,包含attr().

值: none 或者 normal

当设置为none,这个伪元素不会生成.如果设置为normal,他将计算到none.

p::before {
  content: normal;
}
p::after {
  content: none;
}

这种事情,可能用于嵌套元素中,他们已经有了一个伪元素的定义,但是在某些情况下,你想覆盖他们.

值: 98c455a79ddfebb79781bff588e7b37e

content可以设置为一个字符串,任何的字符内容.如果使用不是拉丁字符的,这个字符必须得编码.我们看下面的自理,考虑这个HTML.

<h2>Tutorial Categories</h2><ol>
  <li>HTML and CSS</li>
  <li class="new">Sass & Less</li>
  <li>JavaScript</li></ol><p class="copyright">SitePoint, 2017<p>

下面是CSS代码:

.new::after {
  content: " New!";
  color: green;
}
.copyright::before {
  content: "\00a9  ";
}

这里在列表项中插入一个文本内容,且同样在P标签中插入一个编码字符.

一个字符串必须有单引号或者双引号包含起来.

值: b3878c19b9109b5a703f8ec943eabc14

如果你想显示一些媒体文件,这时候 b3878c19b9109b5a703f8ec943eabc14就可以派上用场了.你可以指向一个外部资源(比如图片).如果一些资源或者图片不显示,他会忽略或者有一个占位符. 那看下面的代码,如何使用他们.

HTML:

<a class="sp" href="http://www.sitepoint.com/">SitePoint</a>

CSS:

.sp::before {
  content: url(http://www.sitepoint.com/favicon.ico);
}

值: counter() or counters()

这个值大部分用于复合值.他可以是两个不同函数中的一个-- counter() 或者 counters().

下面我们通过一个例子来看看counter:

<h2>Name of First Four Planets</h2>
<p class="planets">Mercury</p>
<p class="planets">Venus</p>
<p class="planets">Earth</p>
<p class="planets">Mars</p>

CSS:

.planets {
  counter-increment: planetIndex;
}
.planets::before {
  content: counter(planetIndex) ". ";
}

这个数字将会在p标签中显示.类似一个排序列表. 这个例子中,我们可以很简单的使用一个排序列表. 这里我们不做详细讲解.后期我会出一篇详细的文章来讲解这两个函数.

值: attr()

从字面量来看,attr 函数就是插入一个指定的属性值,他仅有一个参数.如果元素没有属性,返回一个空字符.

下面一个例子:

<ul>
  <li><a href="http://www.sitepoint.com/html-css/">HTML and CSS</a></li>
  <li><a href="http://www.sitepoint.com/javascript">JavaScript</a></li>
  <li><a href="http://www.sitepoint.com/mobile/">Mobile</a></li></ul>

通过上面的HTML,在结合下面的CSS的属性设置为href,这时候链接文字后面将会加入他自身的链接文本.

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

值: open-quote 或者close-quote

当我们设置为这个值,content属性会生成一个引号标记.它通常与1244aa79a84dea840d8e55c52dc97869标签元素一起使用.但是你可以用在任何元素上.因此你可以做一些相关事情,例如下面:

blockquote::before {
  content: open-quote;
}
blockquote::after {
  content: close-quote;
}

这 close-quote 值仅在 ::after 伪元素中有效, 如果值 open-quote没有被设置在同样的元素的伪元素::before上,他也不会有任何效果.

值: no-open-quote or no-close-quote

no-open-quote值移除开始的引号,no-close-quote 移除结束的引号. 你可能非常想知道他们有什么用呢.看下面的HTML代码:

<p>
    <q>A wise man once said: 
      <q>
        Be true to yourself, but don&#39;t listen to those who say 
        <q>
          Don&#39;t be true to yourself.
        </q>
      </q> 
      That is good advice.
    </q>
</p>

注意上面的段落,讲话人引入了 (“A wise man…”)说话人,依次,也引入了另外的说话人("those who say..."). 因此我们引入进行了三次嵌套. 从语法上讲,这是一个正确的处理方式.如果要使用生成的内容,我们得确保引入嵌套的正确:

q {
  quotes: &#39;“&#39; &#39;”&#39; &#39;‘&#39; &#39;’&#39; &#39;“&#39; &#39;”&#39;;
}
q::before { 
  content: open-quote;
}
q::after {
  content: close-quote;
}

第一个选择器定义了我们要用到的一些引号.使用quotes属性设置三个值. 然后我们插入引号作为内容使用.这就类似于上面一节讲到的那样.

但是如果我们想第二个引号被忽略或者不插入,那怎么办? 我们可以使用 no-open-quote 和 no-close-quote值来覆盖他们.

.noquotes::before {
  content: no-open-quote;
}
.noquotes::after {
  content: no-close-quote;
}

第二个不需要引号的,就将第二个q加入class = "noquotes".这就完成了我们想要的结果.

以上内容就是CSS的 content 属性详细介绍，希望能帮助到大家。

詳解 CSS的 content 屬性

相關文章