CSS3学习系列之选择器（四）
- 使用选择器来插入文字
css2中，使用before选择器在元素前面插入内容，使用after选择器在元素后面插入内容，在选择器的content属性中定义要插入的内容。将content属性值设定为none，然后在不需要插入内容的元素中将class属性值设定为这个给定的类名就可以了。另外，在CSS2.1中，除了none属性值外，还未content属性添加了一个normal属性值，其作用与使用方法none属性值的作用相同，并且使用方法也相同。从css2.1开始，值右当使用before选择与after选择器的时候，normal属性值的作用才与none属性值的作用相同，都是不让选择器在个别元素的前面或后面插入内容，但是none属性值只能应用在这两个选择器中，而normal属性值还可以应用在其他用来插入内容的选择器中，而在css2中，只有before选择器与after选择器能够用来在元素的前面或后面插入内容，所以在两者的作用完全相同，在css3中，已经追加了其他一些可以插入内容的选择的提案，针对这一类选择器，就只能用normal属性值了，而且normal属性值的作用也会根据选择器的不同而发生变化。
- 插入图像文件
h2:before{
content:url(mark.png)
}
<h2>你好</h2>
目前firefox、safari、opera浏览器都支持这种插入图像文件的功能，在ie8中只支持插入文字的功能，不支持插入图像文件的功能。
另外在css3的定义中还可以通过url属性来插入音频文件、视频文件等其他格式的文件，但目前还没有得到任何浏览器的支持。
- 将alt属性的值作为图像的标题来显示
如果在content属性中通过”attr(属性名)”这种形式来指定attr属性值，可以将某个属性的属性值显示出来，例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr属性的使用示例</title>
<style>
img:after{
content:attr(alt);
display: block;
text-align: center;
margin-top: 5px;
}
</style>
</head>
<body>
<div>
<p><img src="sky.jpg" alt="蓝天白云"/></p>
</div>
</body>
</html>
- 在多个标题前加上连续编号
在content属性中使用counter属性值来针对多个项目追加连续编号，使用方法如下所示：
<元素>:before{
content:counter(计数器名);
}
使用计数器来计算编号，计数器可以任意命名。
另外，还需要在元素的样式中追加对元素的counter-increment属性的指定，为了使用连续编号，需要将counter-increment属性的属性值设定为before选择器或after选择的counter属性值中所指定的计数器名。代码如下：
<元素>{
Counter-increment:before选择器或after选择器中指定的计数器名
}
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对多个项目追加连续编号的示例</title>
<style>
h1:before {
content:counter(mycounter);
}
h1{
counter-increment: mycounter;
}
</style>
</head>
<body>
<div>
<h1>大标题</h1>
<p>示例文字</p>
<h1>大标题</h1>
<p>示例文字</p>
<h1>大标题</h1>
<p>示例文字</p>
</div>
</body>
</html>
- 在项目编号中追加文字
可以在插入的项目编号中加入文字，使项目编号变成类似”第1章”之类的带文字的编号。例如：
h1:before{
content:’第’counter(mycounter)’章’
}
- 指定编号的种类
用before选择器或after选择器的content属性，不仅可以追加数字编号，还可以追加字母编号或罗马数字编号。使用如下所示的方法指定编号种类。
content:counter(计数器名,编号种类)
可以使用list-style-type属性的值来指定编号的种类，list-style-type为指定列表编号时所用的属性。
- 编号嵌套
使用嵌套编号如下：
h1{
counter-increment:mycounter
counter-reset:subcounter
}
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编号嵌套示例</title>
<style>
h1:before {
content:counter(mycounter)'.';
}
h1{
counter-increment: mycounter;
counter-reset: subcounter;
}
h2:before{
content: counter(subcounter)'.';
}
h2{
counter-increment: subcounter;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>大标题</h1>
<h2>中标题</h2>
<h2>中标题</h2>
<h2>中标题</h2>
<h1>大标题</h1>
<h2>中标题</h2>
<h2>中标题</h2>
<h2>中标题</h2>
</body>
</html>
- 中编号中嵌入大编号
可以将大编号嵌入在中编号中。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编号多层嵌入的示例</title>
<style>
h1:before {
content:counter(mycounter)'.';
}
h1{
counter-increment: mycounter;
counter-reset: subcounter;
}
h2:before{
content: counter(mycounter)'-'counter(subcounter)'.';
}
h2{
counter-increment: subcounter;
counter-reset: subsubcounter;
margin-left: 40px;
}
h3:before{
content: counter(mycounter)'-'counter(subconter)'-'counter(subsubcounter)'.';
}
h3{
counter-increment: subsubcounter;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
</body>
</html>
- 在字符串两边添加嵌套文字符号
可以使用conten属性的open-quote属性值与close-quote属性值在字符串两边添加诸如括号，单引号，双引号之类的嵌套文字符号，open-quote属性值用于添加开始的嵌套文字符号，close-quote属性值用于添加结尾的嵌套文字符号。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加嵌套文字符号的示例</title>
<style>
h1:before {
content: open-quote;
}
h1:after{
content: close-quote;
}
h1{
quotes:"("")";
}
</style>
</head>
<body>
<h1>标题</h1>
</body>
</html>
CSS3学习系列之选择器（四）的更多相关文章
- css3学习系列之选择器（一）
CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val ...
- CSS3学习系列之选择器（二）
first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...
- CSS3学习系列之选择器（三）
E:enabled伪类选择器和E:disabled伪类选择器 E:enabled伪类选择器用来指定元素处于可用状态的样式. E:disabled伪类选择器用来指定当元素处于不可用状态时的样式. 当一个 ...
- css3学习总结1--CSS3选择器
CSS3的属性选择器主要包括以下几种: 1. E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的: 2. E[attr$="valu ...
- [CSS3] 学习笔记-CSS选择器
CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{} ...
- CSS3学习系列之背景相关样式（二）
在border-radius属性中指定两个半径 在border-radius属性中,可以指定两个半径,指定方法如下所示: border-radius:40px 20px; 针对这种情况,各种浏览器的处 ...
- CSS3学习系列之字体
给文字添加阴影 在CSS3中,可以使用text-shadow属性给页面上的文字添加阴影效果.text-shadow属性是在css2中定义的,在css2.1中删除,在css3的text模块中有恢复了,用 ...
- CSS3学习系列之盒样式（一）
盒的基本类型 在css中,使用display属性来定义盒的类型,总体上来说,css中的盒分为block类型与inline类型 inline-block类型 inline-block类型是在css2.1 ...
- CSS3学习系列之盒样式（二）
text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的 ...
随机推荐
- CentOS_5.6下使用cmake编译MySQL_5.5.11
MySQL 最新的版本5.5.11需要cmake编译安装,估计以后的版本也会采用这种方式,网上找了一些安装方法有些地方是错的,自己整理一份 所以特地记录一下安装步骤及过程,以供参考!1 mysql 5 ...
- hibernate 插入数据时让数据库默认值生效
用hibernate做数据库插入操作时,在数据库端已经设置了对应列的默认值,但插入的数据一直为null.查找资料发现,原来是hibernate的配置项在作怪. Hibernate允许我们在映射文件里控 ...
- MySQL修改表字段相关信息
昨天收获颇多,首先回顾一下有关mysql的内容. 我在查询表信息时,出现了 empty set 0.00 sec 的错误,我很奇怪,仔细检查发现原来是表字段名称写错了, 于是我想修改字段名称,经过查询 ...
- VirtulBox虚拟机搭建Linux Centos系统
简要说明 该文章目的是基于搭建hadoop的前置文章,当然也可以搭建Linux的入门文章.那我再重复一下安装准备软件. 环境准备:http://pan.baidu.com/s/1dFrHyxV 密码 ...
- Android自定义评分控件：RatingStarView
RatingStarView Android自定义的评分控件,类似ProgressBar那样的,使用星星图标(full.half.empty)作为progress标识的评分/打分控件. 效果图 图1: ...
- mysql的一些使用操作
1:如果空闲时间很长导致mysql报错: Caused by: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: The last pa ...
- 关于SqlServer远程跨库修改数据
今天遇到一个需求需要修改远程服务器上的数据,如何直接修改,并且垮库,跨库简单,直接加上数据库名字,远程的话则需要创建链接服务器,具体步骤如下: --创建链接服务器 exec sp_addlinked ...
- Java学习笔记——排序算法之简单排序
男儿何不带吴钩,收取关山五十州.请君暂上凌烟阁,若个书生万户侯? --南园十三首 三种排序法: 1.冒泡法 2.简单选择法 3.直接插入法 上代码: 1.冒泡排序 public class Bub ...
- ZooKeeper实践：（1）配置管理
一. 前言 配置是每个程序不可或缺的一部分,配置有多重方式:xml.ini.property.database等等,从最初的单机环境到现在的分布式环境. 1. 以文件的格式存储配置,修改任何都 ...
- robotframe 学习笔记(之一)
在robot framework中,通过 Set variable关键字来定义变量 连接对象: 通过Catenate关键字可以连接多个信息 加上"SEPARATOR=",可以对多个 ...