国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css系列之before或after中content

lieeps / 1250人閱讀

摘要：要配合和屬性使用。，給同級元素增加計數(shù)器用于標(biāo)識自增計數(shù)器的作用范圍，為自定義名稱，為起始編號默認(rèn)為。

**單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素，不過瀏覽器需要同時支持舊的已經(jīng)存在的偽元素寫法，
比如:first-line、:first-letter、:before、:after等，單冒號(:)兼容性更好**

content可能的值 
div::after{
    content: "普通字符串";
    content: attr(父元素的html屬性名稱);
    content: url(圖片、音頻、視頻等資源的url);
    
    /* 使用unicode字符集，采用4位16進制編碼，但不同的瀏覽器顯示存在差異，而且移動端識別度更差*/
    content: "21e0";
    
    /* content的多個值可以任意組合，各部分通過空格分隔 */
    content: """ attr(title) """;
    
    /* 自增計數(shù)器，用于插入數(shù)字/字母/羅馬數(shù)字編號 */
    content: counter(, );
    
    /* 以父附屬元素的qutoes值作為content的值*/
    content: open-quote | close-quote | no-open-quote | no-close-quote;
}
插入純文字

content:"string"，或content:none不插入內(nèi)容

h1::after{
    content:"h1后插入內(nèi)容"
}
h2::after{
    content:none
}
字符集 
13900001390


.phoneNumber::before{
    content:"260E";
    font-size: 16px;
}

插入圖片

content屬性也可以直接在元素前/后插入圖片

h3::after{
    content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)
}
插入元素的屬性值

content屬性可以直接利用attr獲取元素的屬性，將其插入到對應(yīng)位置。

這是鏈接  

a:after{
    content:attr(href);
}
計數(shù)器

counter 調(diào)用計數(shù)器，可以不使用列表元素實現(xiàn)序號功能。
counter 要配合 counter-increment 和 counter-reset屬性使用。

content: counter(, );

: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha

counter-reset: [ ?]，給同級元素增加計數(shù)器
用于標(biāo)識自增計數(shù)器的作用范圍，為自定義名稱，為起始編號默認(rèn)為0。

counter-increment: [ ?]，增加計數(shù)器的值
用于標(biāo)識計數(shù)器與實際關(guān)聯(lián)的范圍，為counter-reset中的自定義名稱，為步長默認(rèn)為1。

大標(biāo)題


中標(biāo)題


小標(biāo)題


小標(biāo)題


中標(biāo)題


小標(biāo)題


小標(biāo)題


大標(biāo)題


中標(biāo)題


小標(biāo)題


小標(biāo)題


中標(biāo)題


小標(biāo)題


小標(biāo)題


h1::before{
    content:counter(h1)".";
}
h1{
    counter-increment:h1;
    counter-reset:h2;
}
h2::before{
    content:counter(h1) "-" counter(h2);
}
h2{
    counter-increment:h2;
    counter-reset:h3;
    margin-left:40px;
}
h3::before{
    content:counter(h1) "-" counter(h2) "-" counter(h3);
}
h3{
    counter-increment:h3;
    margin-left:80px;
}

qutoes 
大標(biāo)題


h1{
    quotes:"(" ")";  /*利用元素的quotes屬性指定文字符號*/
}
h1::before{
    content:open-quote;
}
h1::after{
    content:close-quote;
}

中標(biāo)題


h2{
    quotes:""" """;  /*添加雙引號要轉(zhuǎn)義*/
}
h2::before{
    content:open-quote;
}
h2::after{
    content:close-quote;
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117232.html

相關(guān)文章

  • 前端基礎(chǔ)之--css中可被繼承和不可被繼承的屬性

    摘要：一無繼承性的屬性規(guī)定元素應(yīng)該生成的框的類型文本屬性垂直文本對齊規(guī)定添加到文本的裝飾文本陰影效果空白符的處理設(shè)置文本的方向盒子模型的屬性，，，，，，，，，，，，，，，，，，，，，，，，，背景屬性一.無繼承性的屬性 　　1.display：規(guī)定元素應(yīng)該生成的框的類型 　　2.文本屬性：vertical-align：垂直文本對齊 　　　　　　text-decoration：規(guī)定添加到文本的裝飾 　...

    LeexMuller 評論0 收藏0

  • css系列之水平垂直居中

    摘要：水平居中水平居中沒有什么好說的啦，對于行內(nèi)元素使用對于塊級元素使用前提是已經(jīng)為元素設(shè)置了適當(dāng)?shù)膶挾却怪本又袉涡形谋径嘈形谋緜卧匦袃?nèi)元素偽元素未知寬高絕對居中絕對定位已知寬高負要考慮兼容性浮動元素垂直居中父元素 水平居中 水平居中沒有什么好說的啦，對于行內(nèi)元素使用text-align;對于塊級元素使用margin: auto（前提是已經(jīng)為元素設(shè)置了適當(dāng)?shù)?width 寬度）; 垂直居中...

    MiracleWong 評論0 收藏0

  • css3之圖形繪制

    摘要：由于近期的項目中出現(xiàn)了不規(guī)則的邊框和圖形，所以重新溫習(xí)一下的圖形繪制。。。樣式繪制的圖形比圖片的性能要好，體驗更佳，關(guān)鍵一點是更加有趣以下幾個例子主要是運用了中偽元素等屬性來完成的，我們先了解下它們的基本原理。由于近期的項目中出現(xiàn)了不規(guī)則的邊框和圖形， 所以重新溫習(xí)一下CSS3的圖形繪制。。。樣式繪制的圖形比圖片的性能要好，體驗更佳，關(guān)鍵一點是更加有趣！ 以下幾個例子主要是運用了css3中b...

    Null 評論0 收藏0

  • CSS節(jié)選——選擇器

    摘要：，，層疊樣式表，請留意層疊概念。為了區(qū)分偽類和偽元素，偽元素采用雙冒號寫法。常見偽類。常見偽元素。和偽元素的用法和下特有的，用于在渲染中向元素邏輯上的頭部或尾部添加內(nèi)容。CSS，cascading style sheet，層疊樣式表，請留意層疊概念。 css3為了區(qū)分偽類和偽元素，偽元素采用雙冒號寫法。 常見偽類——:hover,:link,:active,:targ...

    番茄西紅柿 評論0 收藏0

  • CSS 打印

    摘要：原文鏈接簡介本文主要講解如何使用控制打印樣式。用戶代理可以調(diào)整文檔內(nèi)容的格式，使其顯示在可打印區(qū)域。不管是否雙面打印，打印總是包含左頁和右頁分別通過指定。偽類和需要雙面打印時，通常需要將左頁和右頁設(shè)置不同的樣式如頁邊距頁碼位置。 原文鏈接：https://lon.im/post/css-print... 簡介 showImg(https://segmentfault.com/img/r...

    weapon 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<