使用选择器来插入文字

h2:before{
content:‘COLUMN’;
color:white;
background-color:orange;
padding:1px 5px;
}

注意点:

  1. 使用content插入的内容要打单引号或双引号
  2. 可以对插入的内容设置样式

对个别元素不进行插入

h2.sample.before{
content:none;
}
h2.sample.before{
content:normal;
} --表示h2中class为sample的不插入内容--

none属性和normal属性用法相同,但是需要说明的是,从CSS2.1开始,只有当使用before和after选择器的时候,normal属性才与none相同,都是不让选择器在个别元素后插入内容。但是none只能用在这两个选择器中,二normal还可以用于其他的CSS3选择器。

插入图像文件

h2:before{
content:url(mark.png);
}

css3的定义中还可以通过url属性来插入音频、视频等其他格式的文件,目前没有浏览器支持。

插入图像文件的好处

  1. 为页面节约大量的编写时间
  2. 与在样式表中追加图片做背景相比,在打印的时候,如果选择不打印背景的话,使用before选择器追加的图片能正常打印,加为背景图片的不能打印。

将alt属性的值作为图像的标题来显示

//css
img:after{content:attr(alt);}
//html
<img src="1.png" alt="hahaha">

hahaha将以文字的形式显示在网页上。

这个属性目前只有Opera10支持

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

在多个标题前加上连续编号:在content属性中使用counter属性来针对多个项目追加连续编号另外,还需要在元素的样式中追加对元素的counter-increment属性的指定,为了使用连续编号,需要将counter-increment属性的属性值设定为before选择器或after选择器的counter属性值中指定的计数器名。

h1:before{
content:counter(mycounter);
}
h1{
counter-increment:mycount;
}

在项目编号中追加文字

h1:before{
content:‘第’counter(mycounter)'章';
}
指定编号的种类:
content:counter(计数器名,编号种类)
upper-roman:大写罗马字母
upper-alpha:大写字母
编号嵌套:可以在大编号中嵌套中编号,在中编号中嵌套小编号。
//大编号:
h1:before{
content:counter(mycounter);
}
h1{
counter-increment:mycounter;
}
//中编号:
h2:before{
content:counter(subcounter);
}
h2{
counter-increment:subcounter;
}

在这个事例中,中标题的编号是连续的,如果想在第二个大标题里的中标题重新开始编号的话,需要在大标题中添加counter-reset属性,在这事例中counter-reset:subcounter

在字符串两边添加嵌套的文字符号

可以使用content属性的open-quote属性值与close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote属性值用于添加开始的嵌套文字符号,close-quote属性值用于添加结尾的嵌套文字符号。注意,当需要添加双引号时,需要使用“\”转义字符。

h1:before {content:open-quote;}
h1:after {content:open-quote;}
h1{quote:"("")";}

当需要添加双引号的时候,需要使用“\”转译字符

h1{quote:"\" "\";}

CSS3 使用选择器在页面插入内容的更多相关文章

  1. CSS3系列一(概述、选择器、使用选择器插入内容)

    CSS3模块化结构 CSS历史发展 CSS(Cascading Style Sheet),层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. CSS3属性选择器 E[att ...

  2. css3在页面中插入内容

    A. 使用选择器来插入内容 h2:before{ content:"前缀"; } h2:after{ content:"后缀"; } B. 指定个别的元素不进行 ...

  3. jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

    插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...

  4. 基于jQ+CSS3页面滚动内容元素动画特效

    今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...

  5. CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素

    # css3 .类:伪类::伪元素 /* CSS3伪元素/伪类 :https://www.w3.org/TR/css3-selectors/#selectors ::selection 伪元素(F12 ...

  6. jq prepend() 方法在被选元素的开头(仍位于内部)插入指定内容。 提示:prepend() 和 prependTo() 方法作用相同。差异在于语法:内容和选择器的位置,以及 prependTo() 无法使用函数来插入内容。

    <html><head><script type="text/javascript" src="/jquery/jquery.js" ...

  7. CSS3常用选择器(一)

    在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素.比如最常用到的#id,.class,标签选择器. 随着CSS3到来,增加了很多新型选择器,这里就常用的做一个总结. 1.属性选择器. 在c ...

  8. CSS3属性选择器与(:not)选择器

    一:css3属性选择器: img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签.   还可以通过设定属性值来缩小匹配范围: ...

  9. 【前端开发系列】—— CSS3属性选择器总结

    想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...

随机推荐

  1. PHP时间戳和日期互转换

    在php中我们要把时间戳转换日期可以直接使用date函数来实现,如果要把日期转换成时间戳可以使用strtotime()函数实现,下面我来给大家举例说明. 1.php中时间转换函数 strtotime ...

  2. Numpy入门 - 数组排序

    本节主要讲解numpy数组的排序方法sort的应用,包括按升序排列和按降序排列. 一.按升序排列 import numpy as np arr = np.array([[3, 1, 2], [6, 4 ...

  3. TCP/IP协议栈 --- IP路由

    IP路由:当一个IP包在主机发送出去或者在网络当中时,是怎么选择路径到达目的主机的呢? 一般情况下, 如果说源主机和目的主机在同一个网络中的话,那个数据报可以直接到达目的主机而不经过路由器,下面可以试 ...

  4. react入门到进阶(三)

    一.react样式 1.内联样式 在以前写html+css的时候,引入css的时候有一种方法就是内联,而在react中又有些不一样,样式是用变量的形式,如下 const styleComponentH ...

  5. C# Excel写入数据及图表

    开发工具:VS2017 语言:C DotNet版本:.Net FrameWork 4.0及以上 使用的DLL工具名称:GemBox.Spreadsheet.dll (版本:37.3.30.1185) ...

  6. POJ 2828 Buy Tickets 线段树 倒序插入 节点空位预留(思路巧妙)

    Buy Tickets Time Limit: 4000MS   Memory Limit: 65536K Total Submissions: 19725   Accepted: 9756 Desc ...

  7. 深入理解php底层:php生命周期

    1.PHP的运行模式: PHP两种运行模式是WEB模式.CLI模式.无论哪种模式,PHP工作原理都是一样的,作为一种SAPI运行. 1.当我们在终端敲入php这个命令的时候,它使用的是CLI. 它就像 ...

  8. Testin云測试破7000万次:崩溃成90%手游应用质量难题

    Testin云測试破7000万次:崩溃成90%手游应用质量难题 2014/11/13 · Testin · 业界资讯 11月13日.全球最大的移动游戏.应用真机和用户云測试平台Testin云測宣布,已 ...

  9. 被动式Telnet研究及实现(解决内外网远程维护的困难)-part A

    欢迎转载.转载请保留原文链接:http://blog.csdn.net/mikulee/article/details/40149779 项目背景及需求: 近期公司有一个项目: 我们在一个arm主机上 ...

  10. 前端MVC Vue2学习总结(一)——MVC与vue2概要、模板、数据绑定与综合示例

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.Vue是框架而jQuery则是库. 1.2.AMD与CM ...