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

資訊專欄INFORMATION COLUMN

CSS3的content屬性詳解

RyanHoo / 915人閱讀

摘要：中主要的偽元素有四個(gè)，在偽元素選擇器中，有一個(gè)屬性，能夠?qū)崿F(xiàn)頁面中的內(nèi)容插入。這是鏈接運(yùn)行結(jié)果插入項(xiàng)目編號(hào)利用的屬性針對(duì)多個(gè)項(xiàng)目追加連續(xù)編號(hào)大標(biāo)題文字大標(biāo)題文字大標(biāo)題文字大標(biāo)題文字運(yùn)行結(jié)果項(xiàng)目編號(hào)修飾默認(rèn)插入的項(xiàng)目編號(hào)是數(shù)字型的，。。。

CSS中主要的偽元素有四個(gè)：before/after/first-letter/first-line，在before/after偽元素選擇器中，有一個(gè)content屬性，能夠?qū)崿F(xiàn)頁面中的內(nèi)容插入。

插入純文字

content:"插入的文章"，或者content:none不插入內(nèi)容
html:

這是h1


這是h2

css

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

運(yùn)行結(jié)果：https://jsfiddle.net/dwqs/Lmm1r08x/

嵌入文字符號(hào)

可以使用content屬性的open-quote屬性值和close-quote屬性值在字符串兩邊添加諸如括號(hào)、單引號(hào)、雙引號(hào)之類的嵌套文字符號(hào)。open-quote用于添加開始的文字符號(hào)，close-quote用于添加結(jié)束的文字符號(hào)。修改上述的css:

h1{
    quotes:"(" ")";  /*利用元素的quotes屬性指定文字符號(hào)*/
}
h1::before{
    content:open-quote;
}
h1::after{
    content:close-quote;
}
h2{
    quotes:""" """;  /*添加雙引號(hào)要轉(zhuǎn)義*/
}
h2::before{
    content:open-quote;
}
h2::after{
    content:close-quote;
}

運(yùn)行結(jié)果：https://jsfiddle.net/dwqs/p8e3qvv4/

插入圖片

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

這是h3

css:

h3::after{
    content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)
}

運(yùn)行結(jié)果：https://jsfiddle.net/dwqs/c6qk6pkv/

插入元素的屬性值

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

這是鏈接  

css:

a:after{
    content:attr(href);
}

運(yùn)行結(jié)果：https://jsfiddle.net/dwqs/m220nzan/

插入項(xiàng)目編號(hào)

利用content的counter屬性針對(duì)多個(gè)項(xiàng)目追加連續(xù)編號(hào).
html:

大標(biāo)題


文字


大標(biāo)題


文字


大標(biāo)題


文字


大標(biāo)題


文字

css:

h1:before{
    content:counter(my)".";
}
h1{
    counter-increment:my;
}

運(yùn)行結(jié)果：https://jsfiddle.net/dwqs/2ueLg3uj/

項(xiàng)目編號(hào)修飾

默認(rèn)插入的項(xiàng)目編號(hào)是數(shù)字型的，1,2,3.。。。自動(dòng)遞增，也能給項(xiàng)目編號(hào)追加文字和樣式,依舊利用上面的html，css修改如下：

h1:before{
    content:"第"counter(my)"章";
    color:red;
    font-size:42px;
}
h1{
    counter-increment:my;
}

運(yùn)行結(jié)果：https://jsfiddle.net/dwqs/17hqznca/

指定編號(hào)種類

利用content(計(jì)數(shù)器名，編號(hào)種類)格式的語法指定編號(hào)種類，編號(hào)種類的參考可以依據(jù)ul的list-style-type屬性值。利用上述的html，css修改如下：

h1:before{
    content:counter(my,upper-alpha);
    color:red;
    font-size:42px;
}
h1{
    counter-increment:my;
}

運(yùn)行結(jié)果：https://jsfiddle.net/dwqs/4nsrtxup/

編號(hào)嵌套

大編號(hào)中嵌套中編號(hào)，中編號(hào)中嵌套小編號(hào)。
html:

大標(biāo)題


文字1


文字2


文字3


大標(biāo)題


文字1


文字2


文字3


大標(biāo)題


文字1


文字2


文字3

css:

h1::before{
    content:counter(h)".";
}
h1{
    counter-increment:h;
}
p::before{
    content:counter(p)".";
    margin-left:40px;
}
p{
    counter-increment:p;
}

運(yùn)行結(jié)果：https://jsfiddle.net/dwqs/2k5qbz51/
在示例的輸出中可以發(fā)現(xiàn)，p的編號(hào)是連續(xù)的。如果對(duì)于每一個(gè)h1后的三個(gè)p重新編號(hào)的話，可以使用counter-reset屬性重置，修改上述h1的css:

h1{
    counter-increment:h;
    counter-reset:p;
}

這樣，編號(hào)就重置了，看看結(jié)果：https://jsfiddle.net/dwqs/hfutu4Lq/
還可以實(shí)現(xiàn)更復(fù)雜的嵌套，例如三層嵌套。
html:

大標(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)題

css:

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

運(yùn)行結(jié)果：https://jsfiddle.net/dwqs/wuuckquy/

張大大有一篇利用counter實(shí)現(xiàn)計(jì)數(shù)的文章：小tip:CSS計(jì)數(shù)器+偽類實(shí)現(xiàn)數(shù)值動(dòng)態(tài)計(jì)算與呈現(xiàn)

原文：http://www.ido321.com/1555.html

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

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

相關(guān)文章

  • border-sizing屬性詳解和應(yīng)用

    摘要：用于更改用于計(jì)算元素寬度和高度的默認(rèn)的盒子模型。它有和三種取值。和屬性包括內(nèi)容，內(nèi)邊距和邊框，但不包括外邊距。所以，的解釋很符合常理。使用建議使用建議根據(jù)項(xiàng)目中的使用經(jīng)驗(yàn)和的建議，推薦將屬性設(shè)置為。個(gè)人網(wǎng)站原文鏈接屬性詳解和應(yīng)用 box-sizing用于更改用于計(jì)算元素寬度和高度的默認(rèn)的 CSS 盒子模型。它有content-box、border-box和inherit三種取值。inheri...

    Batkid 評(píng)論0 收藏0

  • 【連載】前端個(gè)人文章整理-從基礎(chǔ)到入門

    摘要：個(gè)人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現(xiàn)在已經(jīng)一年的時(shí)間了，由于工作比較忙，更新緩慢，后面還是會(huì)繼更新，現(xiàn)將已經(jīng)寫好的文章整理一個(gè)目錄，方便更多的小伙伴去學(xué)習(xí)。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個(gè)人前端文章整理 從最開始萌生寫文章的想法，到著手...

    madthumb 評(píng)論0 收藏0

  • 詳解CSS的Flex布局

    摘要：本文由云社區(qū)發(fā)表是的縮寫，意為彈性布局，是的一種布局模式。通過布局，可以很優(yōu)雅地解決很多布局的問題。與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布。表示當(dāng)空間不足時(shí)，不縮小。此文已由作者授權(quán)騰訊云社區(qū)發(fā)布 本文由云+社區(qū)發(fā)表 Flex是Flexible Box 的縮寫，意為彈性布局，是CSS3的一種布局模式。通過Flex布局，可以很優(yōu)雅地解決很多CSS布局的問題。下面會(huì)分別介紹容器的6個(gè)屬性和項(xiàng)...

    番茄西紅柿 評(píng)論0 收藏0

  • 詳解CSS的Flex布局

    摘要：本文由云社區(qū)發(fā)表是的縮寫，意為彈性布局，是的一種布局模式。通過布局，可以很優(yōu)雅地解決很多布局的問題。與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布。表示當(dāng)空間不足時(shí)，不縮小。此文已由作者授權(quán)騰訊云社區(qū)發(fā)布 本文由云+社區(qū)發(fā)表 Flex是Flexible Box 的縮寫，意為彈性布局，是CSS3的一種布局模式。通過Flex布局，可以很優(yōu)雅地解決很多CSS布局的問題。下面會(huì)分別介紹容器的6個(gè)屬性...

    lbool 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<