首页手记全面掌握 Content 的用法

全面掌握 Content 的用法

标签：

Html/CSS CSS3 深度学习

基本用法

content 几乎都是用在 ::before 和 ::after 伪元素中(1)。
content 生成的文本无法选中、无法复制、更无法被搜索引擎抓取，因此只适合生成图标、序号这类无关紧要的内容，最常见的用法：比如清除浮动、插入字体图标等等。

*(1) 为了将伪类( 例如 :hover )和伪元素区别开来，CSS3 标准要求伪元素使用双冒号，但目前的浏览器也接受伪元素单冒号的写法，例如 :before。

例子1：

/* 清除浮动 */
<style>  
    ul li {
        list-style: none;
        float: left;
    }
    
    div {
        height: 2px;
        background: orange;
    }

    .clear::after {
        content: " ";
        display: table;
        clear: both;
    }
</style>

<ul class="clear">
    <li>AA</li>
    <li>BB</li>
    <li>CC</li>
</ul>
<div></div>

例子2：

/* 插入字体图标 */
<style>  
    /* 只在谷歌78 和 Microsoft Edge 中进行了测试 */
    @font-face {
        font-family: 'icon';
        src: url('font_icon.woff');
    }

    /* 常见的引入文字的兼容性写法，没有进行测试
    @font-face {
        font-family: 'icon';
        src: url('font_icon.eot');
        src: url('font_icon.eot?#iefix') format('embedded-opentype'), 
        url('font_icon.woff') format('woff'), 
        url('font_icon.ttf') format('truetype'), 
        url('font_icon.svg#font_icon') format('svg');
    } */
    
    .icon {
        font-family: 'icon';
    }
    
    .icon_user::before {
        content: "\e008";
    }
</style>

<span class="icon icon_user">创建人</span>

其他常见用法

使用 content 生成一些装饰性的符号或文字。

例子：

<style>
    p::before {
        content: "《";
        color: orangered;
        font-weight: 800;
    }
    
    p::after {
        content: "》";
        color: orangered;
        font-weight: 800;
    }
</style>

<p>钢铁是怎样炼成的</p>

使用 content: attr(); 实现悬浮提示。

例子：

<style>
    p {
        position: relative;
        height: 30px;
        line-height: 30px;
    }
    
    p:hover::before {
        content: attr(data-tip);
        background-color: #FFC107;
        color: #fff;
        padding: 3px 10px;
        position: absolute;
        left: 0;
        top: 30px;
        font-size: 12px;
        height: 15px;
        line-height: 15px;
    }
</style>

<p data-tip="作者：尼·奥斯特洛夫斯基">钢铁是怎样炼成的</p>

Content 计数器

在介绍 Content 计数器之前，我们可以先观察下面的例子：

例子：

<style>
    body {
        counter-reset: item;
    }
    
    input:checked {
        counter-increment: item;
    }
    
    h1>span::before {
        content: counter(item);
    }
</style>

<input type="checkbox">苹果
<input type="checkbox">香蕉
<input type="checkbox">葡萄
<h1>你选择了 <span></span> 种水果</h1>

例子中，我们可以看到，在完全不使用 JavaScript 的情况下，我们通过 CSS 就可以实现，选择几种水果，数值也随着变化的效果。
下面我们依次讲解实现 Content 计数器的三个关键点：

1、Counter-reset 属性

上例中，我们在 body 元素中，用到了 counter-reset 属性，其主要作用就是" 声明一个变量 "( 通常在父辈元素中进行声明 )，我们也可以为这个变量赋值，默认是 0。

例子：

<style>
    h1 {
        counter-reset: item 999;
    }
    
    h1::before {
        content: counter(item);
    }
</style>

<h1></h1>

我们也可以同时" 声明多个变量 "( 空格分隔 )，并为其赋值。

例子：

<style>
    h1 {
        counter-reset: item_1 9 item_2 99;
    }
    
    h1::before {
        content: counter(item_1);
    }
    
    h1::after {
        content: counter(item_2);
    }
</style>

<h1></h1>

值也可以是负整数或小数：如果为负整数，大多数浏览器会正常显示，如果为小数，大多数浏览器会直接转变为 0。

例子：

<style>
    h1 {
        counter-reset: item -1;
    }
    /* h1 {
        counter-reset: item 1.0;
    } */
    
    h1::before {
        content: counter(item);
    }
</style>

<h1></h1>

2、Counter-increment 属性

counter-increment 属性的后面可以跟随数字，表示每次计数的变化值( 默认为 1 )。
counter-increment 属性可以简单理解为" 调用变量 "，每调用一次，变量的值就会和变化值相加一次。

例子：

<style>
    h1 {
        counter-reset: item 999;
        counter-increment: item;
    }
    
    h1::before {
        content: counter(item);
    }
</style>

<h1></h1>

与 counter-reset 相呼应，我们也可以同时" 调用多个变量 "( 空格分隔 )。

例子：

<style>
    h1 {
        counter-reset: item_1 7 item_2 97;
        counter-increment: item_1 2 item_2 2;
    }
    
    h1::before {
        content: counter(item_1);
    }
    
    h1::after {
        content: counter(item_2);
    }
</style>

<h1></h1>

变化值也可以是负整数，每调用一次，变量的值就会相应减少。

例子：

<style>
    h1 {
        counter-reset: item 1000;
        counter-increment: item -1;
    }
    
    h1::before {
        content: counter(item);
    }
</style>

<h1></h1>

3、Counter 方法

counter 方法主要用来显示变量的值，上面的例子中，我们一直在使用。除此之外，counter 还支持设置列表样式，即 CSS 中的 list-style-type。其基本语法为：

counter(name,style)

其中，参数 name 为变量名，参数 style 为列表样式。

例子：

<style>
    h1 {
        counter-reset: item 2;
        counter-increment: item;
    }
    
    h1::before {
        content: counter(item, lower-roman);
    }
</style>

<h1></h1>

与上面相呼应，counter 方法可以多次使用，以显示多个变量的值。

例子：

<style>
    h1 {
        counter-reset: item_1 1 item_2 2;
    }
    
    h1::before {
        content: counter(item_1) "+" counter(item_1) "=" counter(item_2);
    }
</style>

<h1></h1>

counter 还有一个升级版的方法，即 counters 方法。counters 方法主要用来实现复杂的列表嵌套。其基本语法为：

counters(name, string, style)

其中，参数 name 和 style 与 counter 方法一样，在此不再介绍。参数 string 为子列表序号的分隔符。

例子：

<style>
    .p_item {
        counter-reset: item;
        padding-left: 20px;
    }
    
    .c_item::before {
        counter-increment: item;
        content: counters(item, "-") ".";
        color: crimson;
    }
</style>

<div class="p_item">
    <p class="c_item">CSS 盒模型</p>
    <div class="c_item">CSS 选择器
        <div class="p_item">
            <p class="c_item">同胞选择器</p>
            <div class="c_item">属性选择器
                <div class="p_item">
                    <p class="c_item">[attribute~=value]</p>
                    <p class="c_item">[attribute*=value]</p>
                </div>
            </div>
        </div>
    </div>
</div>

类似于上例中，这种复杂的嵌套关系，最容易犯错的地方就是将 p_item 与 c_item 设置成兄弟关系，而不是父子关系：

例子：

<style>
    .p_item {
        counter-reset: item;
        padding-left: 20px;
    }
    
    .c_item::before {
        counter-increment: item;
        content: counters(item, "-") ".";
        color: crimson;
    }
</style>

<div class="p_item">
    <p class="c_item">CSS 选择器</p>
    <div class="p_item">
        <p class="c_item">同胞选择器</p>
        <p class="c_item">属性选择器</p>
    </div>
    <p class="c_item">CSS 盒模型</p>
</div>