So verwenden Sie das Inhaltsattribut in CSS-CSS-Tutorial-php.cn

So verwenden Sie das Inhaltsattribut in CSS

王林

Freigeben： 2020-04-14 09:34:59

nach vorne

3353 Leute haben es durchsucht

So verwenden Sie das Inhaltsattribut in CSS

Das Inhaltsattribut wird im Allgemeinen in ::before- und ::after-Pseudoelementen verwendet, um den Inhalt des Pseudoelements darzustellen. Normalerweise ist der Inhaltsattributwert, den wir am häufigsten verwenden, ein reines Zeichen. Tatsächlich stehen viele Werte zur Auswahl.

1. Fügen Sie reine Zeichen ein

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    li{list-style: none;}
    .content{
        position: relative;padding: 10px;
        border: 1px solid #666;margin: 10px;
    }
    .content.only-text::before{
        content: &#39;插入纯字符&#39;;
    }
</style>

<body>
    <h1>1、插入纯字符</h1>
    <div class="content only-text"></div>
</body>

Nach dem Login kopieren

(Empfohlenes Tutorial: CSS-Einführungs-Tutorial)

2. Fügen Sie Bilder ein

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    li{list-style: none;}
    .content{
        position: relative;padding: 10px;
        border: 1px solid #666;margin: 10px;
    }
    .content.fill-image::before{
        content: url(&#39;https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png&#39;);
    }
</style>

<body>
    <h1>2、插入图片</h1>
    <div class="content fill-image"></div>
</body>

Nach dem Login kopieren

3, Elementattribute einfügen

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    li{list-style: none;}
    .content{
        position: relative;padding: 10px;
        border: 1px solid #666;margin: 10px;
    }
    .content.fill-dom-attr::before{
        content: attr(data-title);
    }
</style>

<body>
    <h1>3、插入元素属性</h1>
    <div class="content fill-dom-attr" data-title="我是.fill-dom-attr元素的 data-title 属性值"></div>
</body>

Nach dem Login kopieren

4. Aktuelle Elementnummer (d. h. den aktuellen Elementindex) einfügen

Mit dieser Funktion können die Regeln der Veranstaltungsseite eingeführt werden.

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    li{list-style: none;}
    .content{
        position: relative;padding: 10px;
        border: 1px solid #666;margin: 10px;
    }
    .fill-dom-index li{
        position: relative;
        /* 给计数器加器起个名字，它只会累加 li 标签的索引，li元素中间的div并不会理会 */
        counter-increment: my;
    }
    .fill-dom-index li div::before{
        /* 使用指定名字的计算器 */
        content: counter(my)&#39;- &#39;;
        color: #f00;
        font-weight: 600;
    }
</style>

<body>
    <h1>4、插入当前元素编号(即当前元素索引)</h1>
    <div class="content fill-dom-index">
        <ul>
            <li><div>我是第1个li标签</div></li>
            <div>我是li标签中的第1个div标签</div>
            <li><div>我是第2个li标签</div></li>
            <li><div>我是第3个li标签</div></li>
            <div>我是li标签中的第2个div标签</div>
            <li><div>我是第4个li标签</div></li>
            <li><div>我是第5个li标签</div></li>
        </ul>
    </div>
</body>

Nach dem Login kopieren

5. Geben Sie die aktuelle Elementnummer (angegebener Typ) ein

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    li{list-style: none;}
    .content{
        position: relative;padding: 10px;
        border: 1px solid #666;margin: 10px;
    }
    .fill-dom-index2 li{
        position: relative;
        counter-increment: my2;
    }
    .fill-dom-index2 li div::before{
        /* 第二个参数为list-style-type，可用值见： http://www.w3school.com.cn/cssref/pr_list-style-type.asp*/
        content: counter(my2,lower-latin)&#39;- &#39;;
        color: #f00;
        font-weight: 600;
    }
</style>

<body>
    <h1>5、插入当前元素编号(指定种类)</h1>
    <div class="content fill-dom-index2">
        <ul>
            <li><div>我是第1个li标签</div></li>
            <div>我是li标签中的第1个div标签</div>
            <li><div>我是第2个li标签</div></li>
            <li><div>我是第3个li标签</div></li>
            <div>我是li标签中的第2个div标签</div>
            <li><div>我是第4个li标签</div></li>
            <li><div>我是第5个li标签</div></li>
        </ul>
    </div>
</body>

Nach dem Login kopieren

Empfohlene verwandte Video-Tutorials: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Inhaltsattribut in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!