转载

CSS中需要明白的 content 属性

如果你是一个前端开发者,可能知道有一些很好的伪类的改变,比如CSS content属性.如果不熟悉这些概念的,可能需要去复习一篇了.

在这篇文章中.我们主要是看 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; }

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

值: <string>

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, 2015<p>

下面是CSS代码:

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

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

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

值: <uri>

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

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属性会生成一个引号标记.它通常与<q>标签元素一起使用.但是你可以用在任何元素上.因此你可以做一些相关事情,例如下面:

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't listen to those who say          <q>           Don't be true to yourself.         </q>       </q>        That is good advice.     </q> </p>

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

q {   quotes: '“' '”' '‘' '’' '“' '”'; } 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".这就完成了我们想要的结果.

后期我们会将部分属性做一些详细讲解.请留意!

本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=180 ,欢迎大家传播与分享.

正文到此结束

所属分类：编程技术

本文标签： 开发 ip 参数 web list 2015 java HTML 文章代码博客 CSS http 开发者 cat QQ群
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

CSS中需要明白的 content 属性

content 属性的基本语法.

值: none 或者 normal

值: <string>

值: <uri>

值: attr()

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

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流