<menu id="2q246"><menu id="2q246"></menu></menu><menu id="2q246"><menu id="2q246"></menu></menu>
<menu id="2q246"><strong id="2q246"></strong></menu>
<menu id="2q246"></menu><menu id="2q246"><menu id="2q246"></menu></menu>
<nav id="2q246"></nav>
  • <input id="2q246"><menu id="2q246"></menu></input>
    <tt id="2q246"><tt id="2q246"></tt></tt>
  • 您當前位置:圖趣網(Tuquu) >> 網頁設計教程 >> 移動前端 >> 瀏覽設計教程

    css的content屬性的詳細使用

    content屬性一樣平常用于::before、::after偽元素中,用于呈現偽元素的內容。平時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、插入當前元素編號(即當前元素索引)

    這個特征可用于活動網頁的規則介紹。

    <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)'- ';
            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{
            /* 第二個參數為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>

    以上就是本文的悉數內容,盼望對大家的學習有所幫助,也盼望大家多多支持圖趣網。

    [教程作者:佚名]
    免責聲明:本站文章系圖趣網整理發布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業用途!
    本文地址:http://www.iamyunfeng.com/Tutorial/wd498.html
    通過CSS變量修改樣式的方法示例
    css加載會造成壅塞嗎
    圖趣網微信
    建議反饋
    ×
    挺进h孕妇的孕肚视频
    <menu id="2q246"><menu id="2q246"></menu></menu><menu id="2q246"><menu id="2q246"></menu></menu>
    <menu id="2q246"><strong id="2q246"></strong></menu>
    <menu id="2q246"></menu><menu id="2q246"><menu id="2q246"></menu></menu>
    <nav id="2q246"></nav>
  • <input id="2q246"><menu id="2q246"></menu></input>
    <tt id="2q246"><tt id="2q246"></tt></tt>