CSS3 content属性学习
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属性学习的更多相关文章
- 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别
高效开发之SASS篇 作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...
- web前端学习（三）css学习笔记部分（8）-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触
15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...
- CSS3中的counter和content属性,一些简单的内容显示就不需要JS去实现了
HTML的代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...
- css3 的content 属性
content属性想必大家都熟悉了,一般结合伪类一起使用,表示显示的内容 例如:.box:before{content:"hello";width:100px;line-heigh ...
- css3新属性的学习使用
display 可选值:none隐藏元素: block显示为块级元素: inline显示为行级元素 inlineblock显示为内联块级元素,本身将是一个行级元素,但是拥有 块级元素的所有属性,比如宽 ...
- CSS3使用content属性来插入项目编号
首先可以使用before选择器与after选择器的content属性在元素的前面或者后面插入文字和图像,这里我记录的是利用这个content属性来在项目前插入项目编号,同时可以利用content属性在 ...
- #学习记录#——CSS content 属性
CSS content 属性常结合:before 和:after 这两个伪类一起使用,给指定的元素添加内容来丰富页面. 1. 添加文本内容 html: <h1>给末尾添加内容. </ ...
- css3 transition属性
最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...
- CSS3基础(4)——CSS3 渲染属性
一. CSS3 计数器详解 CSS3计数器(CSS Counters)可以允许我们使用CSS对页面中的任意元素进行计数,实现类似于有序列表的功能. 与有序列表相比,它的突出特性在于可以对任意元素 ...
随机推荐
- 服务器端Session和客户端Session（和Cookie区别）
Session其实分为客户端Session和服务器端Session. 当用户首次与Web服务器建立连接的时候,服务器会给用户分发一个 SessionID作为标识.SessionID是一个由24个字符组 ...
- 自动更新SVN项目
@echo off@echo =================================@echo 定时在SVN上自动更新项目内容,可用于项目放在web服务器没有hudson的时候@echo ...
- mysql聚合函数操作
1.mysql对中文进行排序 注:是用convert函数用gb2312编码转换 SELECT * FROM 表名 ORDER BY CONVERT(字段名 USING gb2312 ) ASC;
- SQL SERVER自动化运维系列
SQL SERVER自动化运维系列 转自:https://www.cnblogs.com/zhijianliutang/p/5001142.html 本系列为SQL SERVER自动化运维的一些操作技 ...
- node.js基本工作原理及流程
概述 Node.js是什么 Node 是一个服务器端 JavaScript 解释器,用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非 ...
- spawn 和 exec 的区别（转载）
众所周知,Node.js在child_process模块中提供了spawn和exec这两个方法,用来开启子进程执行指定程序.这两个方法虽然目的一样,但是既然Node.js为我们提供了两个方法,那它们之 ...
- python中decorator的用法及原理（一）
0. 概念 什么叫装饰器,其实也可以叫做包装器.即对于一个既有的函数func(args),在调用它之前和之后,我们希望都做一些事情,把这个函数包装起来. Python中的装饰器分为两类:函数装饰器和类 ...
- myeclipse如何删除自带Javaee里面jar包
myeclipse是我们在使用Java开发时的一款不错的集成开发环境软件,一般在开发web项目的时候,都要引入相关的jar包,javaee包就是其中一个,有时候其里面的jar包可能与我们需要的不匹配, ...
- Hadoop2.0中单点故障解决方案总结---老董
Hadoop 1.0内核主要由两个分支组成:MapReduce和HDFS,众所周知,这两个系统的设计缺陷是单点故障,即MR的JobTracker和HDFS的NameNode两个核心服务均存在单点问题, ...
- day2 笔记
while 条件: # 循环体 # 如果条件为真,那么循环体则执行 # 如果条件为假,那么循环体不执行 循环中止语句 如果在循环的过程中,因为某 ...