欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css的content屬性的具體使用

  發(fā)布時間：2019-02-14 15:43:19   作者：heath_learning   我要評論
這篇文章主要介紹了css的content屬性的具體使用，用于呈現(xiàn)偽元素的內(nèi)容。平時content屬性值我們用的最多的就是給個純字符，其實它還有很多值可供選擇。感興趣的可以了解一下

content屬性一般用于::before、::after偽元素中，用于呈現(xiàn)偽元素的內(nèi)容。平時content屬性值我們用的最多的就是給個純字符，其實它還有很多值可供選擇。

1、插入純字符

<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: '插入純字符';
    }
</style>

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

2、插入圖片

<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('https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png');
    }
</style>

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

3、插入元素屬性

<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>

4、插入當前元素編號(即當前元素索引)

這個特性可用于活動頁面的規(guī)則介紹。

<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;
        /* 給計數(shù)器加器起個名字，它只會累加 li 標簽的索引，li元素中間的div并不會理會 */
        counter-increment: my;
    }
    .fill-dom-index li div::before{
        /* 使用指定名字的計算器 */
        content: counter(my)'- ';
        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>

5、插入當前元素編號(指定種類)

<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{
        /* 第二個參數(shù)為list-style-type，可用值見： http://www.w3school.com.cn/cssref/pr_list-style-type.asp*/
        content: counter(my2,lower-latin)'- ';
        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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 使用CSS content的attr實現(xiàn)鼠標懸浮提示（tooltip）效果

    這篇文章主要介紹了使用CSS content的attr實現(xiàn)鼠標懸浮提示（tooltip）效果,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-10

  • 詳解CSS 偽元素及Content 屬性

    本文講講述偽元素以及功能強大的Contet屬性，文章通過實例代碼相結(jié)合的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧
    2018-09-18

  • CSS3的 fit-content實現(xiàn)水平居中

    今天通過本文給大家介紹一個fit-content屬性的相關(guān)知識，CSS屬性是用來水平居中的，fit-content是CSS3中給width屬性新加的一個屬性值,它配合margin可以讓我們輕松的實現(xiàn)水
    2017-09-07

  • CSS3彈性布局內(nèi)容對齊（justify-content）屬性使用詳解

    這篇文章主要介紹了CSS3彈性布局內(nèi)容對齊（justify-content）屬性使用詳解,具有一定的參考價值，有興趣的可以了解一下
    2017-07-31

  • 淺談html特殊字符 編碼css3 content:"我是特殊符號"

    下面小編就為大家?guī)硪黄獪\談html特殊字符 編碼css3 content:"我是特殊符號"。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-09-09

  • 深入理解css中的align-content屬性

    下面小編就為大家?guī)硪黄钊肜斫鈉ss中的align-content屬性。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-25

  • CSS中的content屬性使用教程

    content屬性最基本的功能是處理文本,但實際能用到content的地方卻非常多,比如圖標和url處理,以及下面將要提到的計數(shù)器例子,接下來就總結(jié)一下CSS中的content屬性使用教程:
    2016-05-12

  • CSS3中的content屬性使用示例

    這篇文章主要介紹了CSS3中的content屬性使用示例,是為CSS3入門學習中的基礎知識,需要的朋友可以參考下
    2015-07-20

  • css中的content: "." 有什么用？為什么要用他？

    有一個DIV作為外部容器，內(nèi)部的DIV如果設置了float樣式，則外部的容器DIV導致不能被撐開，在應用clearfix的元素的結(jié)尾添加content中的內(nèi)容，就達到了撐開容器的目的
    2014-05-13

  • CSS垂直居中網(wǎng)頁布局實現(xiàn)的5種方法

    網(wǎng)頁制作Webjx文章簡介：利用 CSS 來實現(xiàn)對象的垂直居中有許多不同的方法，比較難的是選擇那個正確的方法。我下面說明一下我看到的好的方法和怎么來創(chuàng)建一個好的居中網(wǎng)站。
    2009-04-02

最新評論