CSS3的content屬性詳解

RyanHoo 發布于2019-08-28 18:09 / 908人閱讀

摘要：中主要的偽元素有四個，在偽元素選擇器中，有一個屬性，能夠實現頁面中的內容插入。這是鏈接運行結果插入項目編號利用的屬性針對多個項目追加連續編號大標題文字大標題文字大標題文字大標題文字運行結果項目編號修飾默認插入的項目編號是數字型的，。。。

CSS中主要的偽元素有四個：before/after/first-letter/first-line，在before/after偽元素選擇器中，有一個content屬性，能夠實現頁面中的內容插入。

插入純文字

content:"插入的文章"，或者content:none不插入內容
html:

這是h1
這是h2

css

h1::after{
    content:"h1后插入內容"
}
h2::after{
    content:none
}

運行結果：https://jsfiddle.net/dwqs/Lmm1r08x/

嵌入文字符號

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

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

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

運行結果：https://jsfiddle.net/dwqs/c6qk6pkv/

插入元素的屬性值

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

這是鏈接

css:

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

運行結果：https://jsfiddle.net/dwqs/m220nzan/

插入項目編號

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

大標題

文字

大標題

文字

大標題

文字

大標題

文字

css:

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

運行結果：https://jsfiddle.net/dwqs/2ueLg3uj/

項目編號修飾

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

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

運行結果：https://jsfiddle.net/dwqs/17hqznca/

指定編號種類

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

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

運行結果：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;
}

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

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

這樣，編號就重置了，看看結果：https://jsfiddle.net/dwqs/hfutu4Lq/
還可以實現更復雜的嵌套，例如三層嵌套。
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;
}

運行結果：https://jsfiddle.net/dwqs/wuuckquy/

張大大有一篇利用counter實現計數的文章：小tip:CSS計數器+偽類實現數值動態計算與呈現

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

云服務器 GPU云服務器屬性詳解屬性選擇器詳解 Mask屬性詳解 Qt屬性系統詳解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111049.html

border-sizing屬性詳解和應用

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

Batkid 2019-04-23 13:30 評論0 收藏0
【連載】前端個人文章整理-從基礎到入門

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

madthumb 2019-08-23 14:15 評論0 收藏0
詳解CSS的Flex布局

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

番茄西紅柿 2019-04-23 13:07 評論0 收藏0
詳解CSS的Flex布局

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

lbool 2019-08-30 15:54 評論0 收藏0