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

你可以这样写：

h1:after{

　　content:'h1后插入的文本';

　　...

}

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

content的取值：
normal：默认值。表现与none值相同

none：不生成任何值。

<attr>：插入标签属性值

<url>：使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）

<string>：插入字符串

counter(name)：使用已命名的计数器

counter(name,list-style-type)：使用已命名的计数器并遵从指定的list-style-type属性

counters(name,string)：使用所有已命名的计数器

counters(name,string,list-style-type)：使用所有已命名的计数器并遵从指定的list-style-type属性

no-close-quote：并不插入quotes属性的后标记。但增加其嵌套级别

no-open-quote：并不插入quotes属性的前标记。但减少其嵌套级别

close-quote：插入quotes属性的后标记

open-quote：插入quotes属性的前标记

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

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

比如我有如下html结构：

<ul>

    <li>这个是有序列表</li>

    <li>这个是有序列表</li>

    <li>这个是有序列表</li>

    <li>这个是有序列表</li>

    <li>这个是有序列表</li>

</ul>

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

ul li{

  counter-increment:index;

}

ul li:after{

    content:'统计：'counter(index);

    display:block;

    line-height:35px;

}

效果如图：

解释：

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

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

下面给出完整DEMO

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="utf-8">

<title>CSS content</title>

<meta name="author" content="phpstudy.net">

<meta name="copyright" content="www.phpstudy.net">

<style>

.string p:after {

    margin-left: -16px;

    background: #fff;

    content: "支持";

    color: #f00;

}

.attr p:after {

    content: attr(title);

}

.url p:before {

    content: url(https://pic.cnblogs.com/avatar/779447/20160817152433.png);

    display: block;

}

.test ol {

    margin: 16px 0;

    padding: 0;

    list-style: none;

}

.counter1 li {

    counter-increment: testname;

}

.counter1 li:before {

    content: counter(testname)":";

    color: #f00;

    font-family: georgia,serif,sans-serif;

}

.counter2 li {

    counter-increment: testname2;

}

.counter2 li:before {

    content: counter(testname2,lower-roman)":";

    color: #f00;

    font-family: georgia,serif,sans-serif;

}

.counter3 ol ol {

    margin: 0 0 0 28px;

}

.counter3 li {

    padding: 2px 0;

    counter-increment: testname3;

}

.counter3 li:before {

    content: counter(testname3,float)":";

    color: #f00;

    font-family: georgia,serif,sans-serif;

}

.counter3 li li {

    counter-increment: testname4;

}

.counter3 li li:before {

    content: counter(testname3,decimal)"."counter(testname4,decimal)":";

}

.counter3 li li li {

    counter-increment: testname5;

}

.counter3 li li li:before {

    content: counter(testname3,decimal)"."counter(testname4,decimal)"."counter(testname5,decimal)":";

}

</style>

</head>

<body>

<ul class="test">

    <li class="string">

        <strong>string：</strong>

        <p>你的浏览器是否支持content属性：否</p>

    </li>

    <li class="attr">

        <strong>attr：</strong>

        <p title="如果你看到我则说明你目前使用的浏览器支持content属性"></p>

    </li>

    <li class="url">

        <strong>url()：</strong>

        <p>如果你看到我的头像图片则说明你目前使用的浏览器支持content属性</p>

    </li>

    <li class="counter1">

        <strong>counter(name)：</strong>

        <ol>

            <li>列表项</li>

            <li>列表项</li>

            <li>列表项</li>

        </ol>

    </li>

    <li class="counter2">

        <strong>counter(name,list-style-type)：</strong>

        <ol>

            <li>列表项</li>

            <li>列表项</li>

            <li>列表项</li>

        </ol>

    </li>

    <li class="counter3">

        <strong>counter(name)拓展应用：</strong>

        <ol>

            <li>列表项

                <ol>

                    <li>列表项

                        <ol>

                            <li>列表项</li>

                            <li>列表项</li>

                        </ol>

                    </li>

                    <li>列表项</li>

                </ol>

            </li>

            <li>列表项

                <ol>

                    <li>列表项</li>

                    <li>列表项</li>

                </ol>

            </li>

            <li>列表项

                <ol>

                    <li>列表项</li>

                    <li>列表项</li>

                </ol>

            </li>

        </ol>

    </li>

</ul>

</body>

</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. Let's encrypt申请泛域名证书

    1.下载工具 wget https://dl.eff.org/certbot-auto chmod a+x ./certbot-auto 2.初始化 ./certbot-auto 3.获取证书(1) ...

  2. SQLServer中计算周

    --本周最大值与最小值.平均值 DECLARE @WeekMax float,@WeekMin float,@WeekAvg float,@AddDate varchar(20) DECLARE @W ...

  3. 多个StoryBoard之间的跳转

    iOS项目中可以将同一业务流程的页面归置到一个StoryBoard中,项目中必然会包含多个StroryBoard,可以利用跳转,实现项目的不同业务流程页面间的跳转切换. 实现思路: 1,项目(Proj ...

  4. Python菜鸟之路：Django 数据验证之钩子和Form表单验证

    一.钩子功能提供的数据验证 对于数据验证,django会执行 full_clean()方法进行验证.full_clean验证会经历几个步骤,首先,对于model的每个字段进行正则验证,正则验证通过后, ...

  5. Eclipse 介绍

    设置背景的插件: Darkest Dark Theme 添加 properties 插件: Properties Editor Git 插件: Egit 常用快捷键 command + 1 : 代码提 ...

  6. （4.17）sql server中的uuid获取与使用

    sql server中的uuid  建表: 1.自增长 studentno int primary key identity(1,1)——bigint也是可以的 2.创建uuidcustomerid  ...

  7. python16_day13【css、js】

    一.部局 1.pg-header(title) .pg-header{ height: 48px; background-color: cadetblue; line-height: 48px; mi ...

  8. rsync+inotify实时同步

    !!!在安装前要先确保,rsync daemon服务配置成功,在安装inotify-tools前先确认你的linux内核是否达到了2.6.13,并且在编译时开启CONFIG_INOTIFY选项,也可以 ...

  9. MyBatis For .NET学习- 初识MyBatis

    MyBatis的框架. Introduction MyBatis本是apache的一个开源项目iBatis,2010年这个项目由 apache software foundation迁移到了googl ...

  10. VMWare 网络连接模式(bridged、NAT、host-only)详解

    转自VMWare 网络连接模式(bridged.NAT.host-only)详解 host-only 在某些特殊的网络调试环境中,如何要求将真实环境和虚拟环境隔离开,这时你就可采用host-only模 ...