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屬性也可以直接在元素前面/後插入圖片
rrreee運行結果:https://jsfiddle.net/dwqs/c6qk6pkv/
content屬性可以直接利用attr來取得元素的屬性,將其插入對應位置。
#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/m220nzan/
利用content的counter屬性針對多個項目追加連續編號.
#html <a href="http:///www.ido321.com">这是链接</a> #css a:after{ content:attr(href); }
運行結果:https://jsfiddle.net/dwqs/2ueLg3uj/
#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/17hqznca/指定編號種類利用content(計數器名,編號種類)格式的語法指定編號種類,編號種類的參考可以依據ul的
list-style-type屬性值。利用上述的html,css修改如下:
h1:before{ content:'第'counter(my)'章'; color:red; font-size:42px; } h1{ counter-increment:my; }運行結果:https://jsfiddle.net/dwqs/4nsrtxup/編號嵌套大編號中嵌套中編號,中編號中嵌套小編號。
h1:before{ content:counter(my,upper-alpha); color:red; font-size:42px; } h1{ counter-increment:my; }運行結果:https://jsfiddle.net/dwqs/2k5qbz51/在範例的輸出中可以發現,p的編號是連續的。如果每一個h1後的三個p重新編號的話,可以使用counter-
reset屬性重置,修改上述h1的css:
#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/hfutu4Lq/還可以實現更複雜的嵌套,例如三層嵌套。
h1{ counter-increment:h; counter-reset:p; }#
以上是關於CSS3的content屬性詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!