知道css有个content属性吗?有什么作用?有什么应用?

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 伪类实现。

时间: 2024-10-12 05:30:07

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

知道css有个content属性吗?有什么作用?有什么应用?可以伪类清除浮动

知道.css的content属性专门应用在 before/after 伪元素上,用来插入生成内容.最常见的应用是利用伪类清除浮动. .clearfix:after { content:"."; //这里利用到了content属性 display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; } after伪元素通过 content 在元素的后面生成了内容为一个点的块级素,再利用clear:b

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

CSS content 属性常结合:before 和:after 这两个伪类一起使用,给指定的元素添加内容来丰富页面. 1. 添加文本内容 html: <h1>给末尾添加内容. </h1> <h2>给末尾不添加内容. </h2> css: <style> h1:after{ content: “hello world!!” } h2:after{ content: none } </style> 所要添加的内容用双引号引起来,若不添加

content属性的4种用途

content属性浏览器支持情况,兼容到IE8浏览器,IE7及以下不支持 用途一.配合:before及:after伪元素插入文本 <div>     <p>伪元素</p> </div> p:before{     content:'CSS3';     color:#4bb;     font-weight:bold;     margin-right:20px;     background:#f0f0f0;     /*如果要设置宽高的话,就必须变成块级

深入理解css中的定位属性:position

深入理解css中的定位属性:position 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute. 第一部分:static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到top,bottom,left,right的影响. 如html代码如下: <div class=&qu

深入理解css中的margin属性

转载自  http://www.cnblogs.com/zhuzhenwei918/p/6124263.html 深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些"坑"的,下面我会介绍margin的基本知识以及那些"坑".这篇博文主要分为以下几个部分: margin--基础知识 margin--在同级元素(非父子关系)之间应用 margin--在父元素和子元素之间

CSS3的content属性详解

CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个content属性,能够实现页面中的内容插入. 插入纯文字 content:"插入的文章",或者content:none不插入内容 html: <h1>这是h1</h1> <h2>这是h2</h2> css h1::after{ content:"h1后插入内容" } h

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

首先可以使用before选择器与after选择器的content属性在元素的前面或者后面插入文字和图像,这里我记录的是利用这个content属性来在项目前插入项目编号,同时可以利用content属性在字符串两边加上括号. 1.在多个标题前加上连续编号 <style type="text/css"> h1:before{ content:counter(mycounter); } </style> 2.在项目编号中追加文字 h1:before{ content:'

content属性为中文时导致html页面乱码问题

最近项目中遇到了页面乱码问题,具体如下: 其中这段是用了一个a标签,因为文案需要根据情况做"收起”和“展开”两种文案的切换,所以利用伪类before,设置其content属性为中文:收起或者展开,但是在测试过程中,发现有时页面会出现乱码的情况,如上图. 检查HTML文件和CSS文件的编码格式,都是utf-8,并且html文件里也设置了<meta http-equiv="Content-Type" content="text/html; charset=utf-

CSS中的z-index属性如何使用

原文:CSS中的z-index属性如何使用 z-index属性介绍# 只有设置了定位我们才会使用到该z-index属性,如:固定定位.相对定位.绝对定位. 定位元素默认的z-index属性值是0. 如果2个定位的元素都没有设置z-index属性,后者会覆盖到前者. 如果2个定位的元素都设置了z-index属性,并且数值一样大还是后者会覆盖到前者. z-index属性的属性值大的就会覆盖小,就是设置元素的层级. z-index属性实践# 用实践证明这句话,如果2个定位的元素都没有设置z-index