css的content属性专门应用在 before/after 伪元素上,用来插入生成内容。最常见的应用是利用伪类清除浮动。

//一种常见利用伪类清除浮动的代码

.clearfix:after {

    content:"."; //这里利用到了content属性

    display:block;

    height:0;

    visibility:hidden;

    clear:both; }

.clearfix {

    *zoom:1;

}

after伪元素通过 content 在元素的后面生成了内容为一个点的块级素,再利用clear:both清除浮动。

  那么问题继续还有,知道css计数器(序列数字字符自动递增)吗?如何通过css content属性实现css计数器?

答案:css计数器是通过设置counter-reset 、counter-increment 两个属性 、及 counter()/counters()一个方法配合after / before 伪类实现。

知道css有个content属性吗?有什么作用?有什么应用?的更多相关文章

  1. CSS Content 属性

    content 属性,用在after,before伪元素上,用于在选中的元素前后插入内容. 插入的内容多种多样, 纯文字 h1::after{ content:"h1后插入内容" ...

  2. CSS魔法堂:一起玩透伪元素和Content属性

    前言  继上篇<CSS魔法堂:稍稍深入伪类选择器>记录完伪类后,我自然而然要向伪元素伸出"魔掌"的啦^_^.本文讲讲述伪元素以及功能强大的Contet属性,让我们可以通 ...

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

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

  4. CSS中content属性的妙用

    前言 本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁.高效. 定义 W3school中这样定义: content 属 ...

  5. css content属性

    content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容. 用于定义元素之前或之后放置的生成内容.默认地,这往往是行内内容,不过该内容创建的框类型可以用属性 displ ...

  6. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  7. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  8. 理解与应用css中的display属性

    理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...

  9. css中的列表属性

    list-style-type设定引导列表的符号类型,可以设置多种符号类型,值为disc.circle.square等 list-style-image使用图像作为定制列表的符号 list-style ...

随机推荐

  1. “希希敬敬对”团队——敏捷冲刺Alpha过程总结

    “希希敬敬对”团队在七天冲刺过程中每一个小组成员都尽力去完成自己的任务.在合作过程中,总算是有一些成果出现,代码功能能够实现. 对此次冲刺有如下优缺点: 优点: 团队人员合作较多,成员都能够积极响应参 ...

  2. 多线程02-Join

        ; i < ; i++)             {                 Console.WriteLine(i);             }             Co ...

  3. Django的ORM常用查找操作总结

    作者:python技术人 博客:https://www.cnblogs.com/lpdeboke/ 首先这里给出一个用户信息model class UserModel(models.Model): u ...

  4. 推荐 33 个 IDEA 最牛配置,写代码太爽了!

    作者:琦彦 blog.csdn.net/fly910905/article/details/77868300 1.设置maven 1.在File->settings->搜索maven 2. ...

  5. Super Mario HDU 4417 主席树区间查询

    Super Mario HDU 4417 主席树区间查询 题意 给你n个数(编号从0开始),然后查询区间内小于k的数的个数. 解题思路 这个可以使用主席树来处理,因为这个很类似查询区间内的第k小的问题 ...

  6. 调用SM30数据表维护的函数

    相关文章:http://www.cnblogs.com/caizjian/p/3248499.html 1.se11进去新建一个数据表 2.se55进去生产表维护 3.sm30进去维护数据表 4.se ...

  7. Mysql查询结果导出Excel表

    Mysql查询结果导出Excel表: 一句转换方式:$ mysql -uops -p'GCNgH000KP' dtbs -e 'select * from t_proxy__record;' --de ...

  8. ORI-621龙芯3A处理器CPCI刀片计算机

    ORI-621龙芯3A处理器CPCI刀片计算机 一.产品简介 ORI -621是一款基于龙芯3A国产CPU处理器的特种CPCI刀片计算机.该产品成功地实现了服务器NUMA架构在国产特种计算机中的应用, ...

  9. 基于cdn方式的vue+element-ui的单页面架构

    一.下载vue2.x,下载element-ui.js以及css 二.html文件 <!DOCTYPE html> <html> <head> <meta ch ...

  10. pwd 显示当前所在的工作路径

    1.功能说明 pwd命令是“print working directory ”首字母缩写,显示当前目录的绝对路径. 2.语法格式 pwd [option] pwd 选项 3.命令参数 参数 参数说明 ...