CSS3的content屬性詳解
CSS中主要的偽元素有四個:before/after/first-letter/first-line,在before/after偽元素選擇器中,有一個content屬性,能夠實現頁面中的內容插入。
插入純文字
content : ”插入的文章”,或者 content:none 不插入內容
#html <h1>這是h1</h1> <h2>這是h2</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>這是h3</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 <a href="http:///www.ido321.com">這是連結</a> #css a:after{ content:attr(href); }
執行結果:https://jsfiddle.net/dwqs/m220nzan/
插入專案編號
利用content的counter屬性針對多個專案追加連續編號.
#html <h1>大標題</h1> <p>文字</p> <h1>大標題</h1> <p>文字</p> <h1>大標題</h1> <p>文字</p> <h1>大標題</h1> <p>文字</p> #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 <h1>大標題</h1> <p>文字1</p> <p>文字2</p> <p>文字3</p> <h1>大標題</h1> <p>文字1</p> <p>文字2</p> <p>文字3</p> <h1>大標題</h1> <p>文字1</p> <p>文字2</p> <p>文字3</p> #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 <h1>大標題</h1> <h2>中標題</h2> <h3>小標題</h3> <h3>小標題</h3> <h2>中標題</h2> <h3>小標題</h3> <h3>小標題</h3> <h1>大標題</h1> <h2>中標題</h2> <h3>小標題</h3> <h3>小標題</h3> <h2>中標題</h2> <h3>小標題</h3> <h3>小標題</h3> #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計數器+偽類實現數值動態計算與呈現
相關文章
- css3中transition屬性詳解CSSS3
- css3瀏覽器私有屬性字首使用詳解CSSS3瀏覽器
- CSS中content屬性的妙用CSS
- display屬性詳解
- cookie屬性詳解Cookie
- 【CSS系列】被忽略的content屬性CSS
- CSS字型屬性和文字屬性詳解CSS
- css3屬性CSSS3
- CSS3的background屬性CSSS3
- css3的新屬性CSSS3
- CSS3的動畫屬性CSSS3動畫
- CSS定位屬性詳解CSS
- background屬性用法詳解
- UITableView 屬性用法詳解UIView
- css display屬性詳解CSS
- Rust中的derive屬性詳解Rust
- display的flex屬性使用詳解Flex
- font-awesome的使用及其屬性content
- CSS3常用屬性CSSS3
- css3核心屬性CSSS3
- CSS3 filter屬性CSSS3Filter
- CSS3 transition 屬性CSSS3
- CSS3 transform 屬性CSSS3ORM
- CSS3 initial 屬性CSSS3
- css3中的animation屬性CSSS3
- HTML——② HTML 元素、屬性詳解HTML
- z-index屬性詳解Index
- Android屬性動畫詳解(一),屬性動畫基本用法Android動畫
- css3新增屬性APICSSS3API
- ::after和::before 要配合content屬性
- After Effects 圖層屬性及屬性組結構詳解
- Python - __slots__屬性詳解Python
- 屬性配置檔案詳解(2)
- Flutter GetX Tag 屬性使用詳解Flutter
- hibernateid屬性generatorclass=””詳解
- Android 佈局屬性詳解Android
- Android taskAffinity屬性使用詳解Android
- PB TreeView 屬性,事件詳解(轉)View事件