CSS3笔记---使用选择器插入内容

1. 插入文字

标题前加入COLUMN文字，并指定个别标题不加入文字：

h2:before {
    content: "COLUMN";
    color: white;
    background-color: orange;
    font-family: 'Comic Sans MS', Helvetica, sans-serif;
    padding: 1px 5px;
    margin-right: 10px;
}
h2.sample:before {
    content: none;
}

CSS2.1加入了content:normal，对before和after选择器来说，nomral与none的作用一致。但由于CSS3草案中，追加了其他一些可以插入内容的选择器提案，针对这类选择器就只能使用normal值了，而且normal值的作用也会根据选择器的不同而发生变化。

插入嵌套文字符号（IE8不支持）：

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

2. 插入图像（IE8不支持）

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

3. 插入项目编号

在多个标题前加上连续编号

h1:before {
    content: '第'counter(mycounter)'章';
    color: blue;
    font-size: 42px;
}
h1 {
    counter-increment: mycounter; /* 指定计数器 */
}

当存在多级项目时，未确保子项目能重新编号，需要在父项目中添加counter-reset属性：

h1:before{
    content: counter(mycounter);
}
h1{
    counter-increment: mycounter;
    counter-reset: subcounter;
}
h2:before{
    content: counter(subcounter);
}
h2{
    counter-increment: subcounter;
    margin-left: 40px;
}

指定编号种类

h1:before {
    content: counter(mycounter, upper-alpha); // 大写字母编号
}