css3中出现了 ":before",":after"伪类，

你可以这样写：

  1. h1:after{
  2. 　　content:'h1后插入的文本';
  3. 　　...
  4. }

这两个选择器的作用以及效果，这里就不在介绍了；主要说一下上面提到的一个css属性【content】用来和:after及:before伪元素一起使用，在对象前或后显示内容。

  1. content的取值：
    normal：默认值。表现与none值相同
  2. none：不生成任何值。
  3. <attr>：插入标签属性值
  4. <url>：使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）
  5. <string>：插入字符串
  6. counter(name)：使用已命名的计数器
  7. counter(name,list-style-type)：使用已命名的计数器并遵从指定的list-style-type属性
  8. counters(name,string)：使用所有已命名的计数器
  9. counters(name,string,list-style-type)：使用所有已命名的计数器并遵从指定的list-style-type属性
  10. no-close-quote：并不插入quotes属性的后标记。但增加其嵌套级别
  11. no-open-quote：并不插入quotes属性的前标记。但减少其嵌套级别
  12. close-quote：插入quotes属性的后标记
  13. open-quote：插入quotes属性的前标记

这里比较不好理解的取值就是：counter(name)这些；

下面主要总结一下这块，最后会给出各个取值的demo，

比如我有如下html结构：

  1. <ul>
  2.     <li>这个是有序列表</li>
  3.     <li>这个是有序列表</li>
  4.     <li>这个是有序列表</li>
  5.     <li>这个是有序列表</li>
  6.     <li>这个是有序列表</li>
  7. </ul>

我要在每个li的后面加上当前li【index】值：

  1. ul li{
  2.   counter-increment:index;
  3. }
  4. ul li:after{
  5.     content:'统计：'counter(index);
  6.     display:block;
  7.     line-height:35px;
  8. }

效果如图：

解释：

　　count(name)这里的name，必须要提前指定好，否则所有的值都将是0；

　　 count(name,list-style-type)这里的list-style-type就是css中list-style-type属性的取值；

下面给出完整DEMO

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>CSS content</title>
  6. <meta name="author" content="phpstudy.net">
  7. <meta name="copyright" content="www.phpstudy.net">
  8. <style>
  9. .string p:after {
  10.     margin-left: -16px;
  11.     background: #fff;
  12.     content: "支持";
  13.     color: #f00;
  14. }
  15.  
  16. .attr p:after {
  17.     content: attr(title);
  18. }
  19.  
  20. .url p:before {
  21.     content: url(https://pic.cnblogs.com/avatar/779447/20160817152433.png);
  22.     display: block;
  23. }
  24.  
  25. .test ol {
  26.     margin: 16px 0;
  27.     padding: 0;
  28.     list-style: none;
  29. }
  30.  
  31. .counter1 li {
  32.     counter-increment: testname;
  33. }
  34.  
  35. .counter1 li:before {
  36.     content: counter(testname)":";
  37.     color: #f00;
  38.     font-family: georgia,serif,sans-serif;
  39. }
  40.  
  41. .counter2 li {
  42.     counter-increment: testname2;
  43. }
  44.  
  45. .counter2 li:before {
  46.     content: counter(testname2,lower-roman)":";
  47.     color: #f00;
  48.     font-family: georgia,serif,sans-serif;
  49. }
  50.  
  51. .counter3 ol ol {
  52.     margin: 0 0 0 28px;
  53. }
  54.  
  55. .counter3 li {
  56.     padding: 2px 0;
  57.     counter-increment: testname3;
  58. }
  59.  
  60. .counter3 li:before {
  61.     content: counter(testname3,float)":";
  62.     color: #f00;
  63.     font-family: georgia,serif,sans-serif;
  64. }
  65.  
  66. .counter3 li li {
  67.     counter-increment: testname4;
  68. }
  69.  
  70. .counter3 li li:before {
  71.     content: counter(testname3,decimal)"."counter(testname4,decimal)":";
  72. }
  73.  
  74. .counter3 li li li {
  75.     counter-increment: testname5;
  76. }
  77.  
  78. .counter3 li li li:before {
  79.     content: counter(testname3,decimal)"."counter(testname4,decimal)"."counter(testname5,decimal)":";
  80. }
  81. </style>
  82. </head>
  83. <body>
  84. <ul class="test">
  85.     <li class="string">
  86.         <strong>string：</strong>
  87.         <p>你的浏览器是否支持content属性：否</p>
  88.     </li>
  89.     <li class="attr">
  90.         <strong>attr：</strong>
  91.         <p title="如果你看到我则说明你目前使用的浏览器支持content属性"></p>
  92.     </li>
  93.     <li class="url">
  94.         <strong>url()：</strong>
  95.         <p>如果你看到我的头像图片则说明你目前使用的浏览器支持content属性</p>
  96.     </li>
  97.     <li class="counter1">
  98.         <strong>counter(name)：</strong>
  99.         <ol>
  100.             <li>列表项</li>
  101.             <li>列表项</li>
  102.             <li>列表项</li>
  103.         </ol>
  104.     </li>
  105.     <li class="counter2">
  106.         <strong>counter(name,list-style-type)：</strong>
  107.         <ol>
  108.             <li>列表项</li>
  109.             <li>列表项</li>
  110.             <li>列表项</li>
  111.         </ol>
  112.     </li>
  113.     <li class="counter3">
  114.         <strong>counter(name)拓展应用：</strong>
  115.         <ol>
  116.             <li>列表项
  117.                 <ol>
  118.                     <li>列表项
  119.                         <ol>
  120.                             <li>列表项</li>
  121.                             <li>列表项</li>
  122.                         </ol>
  123.                     </li>
  124.                     <li>列表项</li>
  125.                 </ol>
  126.             </li>
  127.             <li>列表项
  128.                 <ol>
  129.                     <li>列表项</li>
  130.                     <li>列表项</li>
  131.                 </ol>
  132.             </li>
  133.             <li>列表项
  134.                 <ol>
  135.                     <li>列表项</li>
  136.                     <li>列表项</li>
  137.                 </ol>
  138.             </li>
  139.         </ol>
  140.     </li>
  141. </ul>
  142. </body>
  143. </html>

CSS3 content属性学习的更多相关文章

  1. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

  2. web前端学习（三）css学习笔记部分（8）-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

  3. CSS3中的counter和content属性,一些简单的内容显示就不需要JS去实现了

    HTML的代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...

  4. css3 的content 属性

    content属性想必大家都熟悉了,一般结合伪类一起使用,表示显示的内容 例如:.box:before{content:"hello";width:100px;line-heigh ...

  5. css3新属性的学习使用

    display 可选值:none隐藏元素: block显示为块级元素: inline显示为行级元素 inlineblock显示为内联块级元素,本身将是一个行级元素,但是拥有 块级元素的所有属性,比如宽 ...

  6. CSS3使用content属性来插入项目编号

    首先可以使用before选择器与after选择器的content属性在元素的前面或者后面插入文字和图像,这里我记录的是利用这个content属性来在项目前插入项目编号,同时可以利用content属性在 ...

  7. #学习记录#——CSS content 属性

    CSS content 属性常结合:before 和:after 这两个伪类一起使用,给指定的元素添加内容来丰富页面. 1. 添加文本内容 html: <h1>给末尾添加内容. </ ...

  8. css3 transition属性

    最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...

  9. CSS3基础(4)——CSS3 渲染属性

    一. CSS3 计数器详解    CSS3计数器(CSS Counters)可以允许我们使用CSS对页面中的任意元素进行计数,实现类似于有序列表的功能. 与有序列表相比,它的突出特性在于可以对任意元素 ...

随机推荐

  1. mysql utf8字符集下使用DES_ENCRYPT

    DES_ENCRYPT() 加密字符串后内容为空 改变字符集latin1  可以保存和解密(DES_DECRYPT)

  2. php 正则表达式三.模式修正

    1.贪婪模式和懒惰模式, 贪婪模式:php中正则默认是贪婪模式,匹配尽可能多 的字符,比如 $pattern='/a+b/'; $subject='aaaaaaaaab,那么可能会preg_match ...

  3. Open System Interconnection

    https://zh.wikipedia.org/wiki/Secure_Shell Secure Shell(缩写为SSH),由IETF的网络工作小组(Network Working Group)所 ...

  4. 解决URL地址中的中文乱码问题的办法

    解决URL地址中的中文乱码问题的办法 引言: 在Restful类的服务设计中,经常会碰到需要在URL地址中使用中文作为的参数的情况,这种情况下,一般都需要正确的设置和编码中文字符信息.乱码问题就此产生 ...

  5. sql 锁类型与锁机制

    SQL Server锁类型(SQL)收藏1． HOLDLOCK: 在该表上保持共享锁,直到整个事务结束,而不是在语句执行完立即释放所添加的锁.   2． NOLOCK:不添加共享锁和排它锁,当这个选项 ...

  6. Frequent Values-线段树求解出现最多的数

    Frequent Values(poj 3368) 注意:以下答案为离线作答结果,并非能通过poj,若要通过poj,需要修改函数接口,因为以下程序接受半封闭区间(s,e],同时还需要修改输入数据的顺序 ...

  7. OVN实战---《A Primer on OVN》翻译

    overview 在本文中,我们将在三个host之间创建一个简单的二层overlay network.首先,我们来简单看一下,整个系统是怎么工作的.OVN基于分布式的control plane,其中各 ...

  8. ovs ovn 学习资料

    0.A Primer on OVN http://blog.spinhirne.com/2016/09/a-primer-on-ovn.html 1.Open Virtual Networking W ...

  9. 汇编学习笔记（AT&T语法）

    一个最基本的汇编程序如下所示: .section .data .section .text .globl _start _start: movl $, %eax # the number 1 is t ...

  10. Java中的字符串不变性

    原文链接:http://www.programcreek.com/2009/02/diagram-to-show-java-strings-immutability/ (图片出处和内容参照) 1.声明 ...