怎么用css3新增属性content

这篇文章将为大家详细讲解有关怎么用css3新增属性content，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

在溪湖等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都网站制作、成都做网站 网站设计制作定制网站制作,公司网站建设,企业网站建设,成都品牌网站建设,成都全网营销推广,外贸网站建设,溪湖网站建设费用合理。

    一、详解content属性

    1、content属性的作用：

    content属性用于插入生成的内容，常和:before选择器和:after选择器配合使用，清除浮动或将生成的内容放在一个元素内容的前面或后面。

    2、基本语法：

    content:normal|string|attr()|uri()|counter();

    normal：默认值。

    string：查入文本的内容，一般是一个字符串。

    attr()：插入元素的属性值，语法：attr(attribute)。

    uri()：插入一个外部资源文件，可以是图像，音频，视频文件或浏览器所支持的其他任何资源。

    counter()：计数器，用于插入排序标识,counter()不仅可以追加数字编号，还可以追加字母编号或罗马数字编号，语法：content:couter(计数器名，编号种类)

    3、浏览器支持：

    1.jpg

    所有浏览器都支持content属性。

    注：IE8只有指定!DOCTYPE才支持Content属性。

    二、csscontent属性的应用

    1、csscontent属性利用伪类after清除浮动

    css的content属性专门应用在before/after伪元素上，最常见的应用是利用伪类清除浮动。

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

    .clearfix:after{

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

    display:block;

    height:0;

    visibility:hidden;

    clear:both;

    }

    .clearfix{

    *zoom:1;

    }

    原理：

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

    2、csscontent属性利用伪元素实现页面中的内容插入

    1）插入纯文字

    用法：content:"插入的文章"，或者content:none不插入内容

    例：

   

这是h2

这是h3

关于“怎么用css3新增属性content”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。