亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS3的content屬性詳解

RyanHoo / 986人閱讀

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

CSS中主要的偽元素有四個：before/after/first-letter/first-line，在before/after偽元素選擇器中，有一個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
}

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

嵌入文字符號

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

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

運行結(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)
}

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

插入元素的屬性值

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

這是鏈接  

css:

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

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

插入項目編號

利用content的counter屬性針對多個項目追加連續(xù)編號.
html:

大標題


文字


大標題


文字


大標題


文字


大標題


文字

css:

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

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

項目編號修飾

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

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

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

指定編號種類

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

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

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

編號嵌套

大編號中嵌套中編號，中編號中嵌套小編號。
html:

大標題


文字1


文字2


文字3


大標題


文字1


文字2


文字3


大標題


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

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

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

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

大標題


中標題


小標題


小標題


中標題


小標題


小標題


大標題


中標題


小標題


小標題


中標題


小標題


小標題

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/111049.html

相關(guān)文章

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

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

    Batkid 評論0 收藏0

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

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

    madthumb 評論0 收藏0

  • 詳解CSS的Flex布局

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

    番茄西紅柿 評論0 收藏0

  • 詳解CSS的Flex布局

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

    lbool 評論0 收藏0

發(fā)表評論

0條評論

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