css的content屬性的詳細使用
2019/4/14 21:26:27來源:不詳
content屬性一樣平常用于::before、::after偽元素中,用于呈現(xiàn)偽元素的內(nèi)容。平時content屬性值我們用的最多的就是給個純字符,其實它還有許多值可供選擇。
1、插入純字符
<style> *{margin: 0;padding: 0;box-sizing: border-box;} li{list-style: none;} .content{ position: relative;padding: 10px; border: 1px solid #666;margin: 10px; } .content.only-text::before{ content: '插入純字符'; } </style> <body> <h1>1、插入純字符</h1> <div class="content only-text"></div> </body>
2、插入圖片
<style> *{margin: 0;padding: 0;box-sizing: border-box;} li{list-style: none;} .content{ position: relative;padding: 10px; border: 1px solid #666;margin: 10px; } .content.fill-image::before{ content: url('https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png'); } </style> <body> <h1>2、插入圖片</h1> <div class="content fill-image"></div> </body>
3、插入元素屬性
<style> *{margin: 0;padding: 0;box-sizing: border-box;} li{list-style: none;} .content{ position: relative;padding: 10px; border: 1px solid #666;margin: 10px; } .content.fill-dom-attr::before{ content: attr(data-title); } </style> <body> <h1>3、插入元素屬性</h1> <div class="content fill-dom-attr" data-title="我是.fill-dom-attr元素的 data-title 屬性值"></div> </body>
4、插入當前元素編號(即當前元素索引)
這個特征可用于活動網(wǎng)頁的規(guī)則介紹。
<style> *{margin: 0;padding: 0;box-sizing: border-box;} li{list-style: none;} .content{ position: relative;padding: 10px; border: 1px solid #666;margin: 10px; } .fill-dom-index li{ position: relative; /* 給計數(shù)器加器起個名字,它只會累加 li 標簽的索引,li元素中心的div并不會理會 */ counter-increment: my; } .fill-dom-index li div::before{ /* 使用指定名字的計算器 */ content: counter(my)'- '; color: #f00; font-weight: 600; } </style> <body> <h1>4、插入當前元素編號(即當前元素索引)</h1> <div class="content fill-dom-index"> <ul> <li><div>我是第1個li標簽</div></li> <div>我是li標簽中的第1個div標簽</div> <li><div>我是第2個li標簽</div></li> <li><div>我是第3個li標簽</div></li> <div>我是li標簽中的第2個div標簽</div> <li><div>我是第4個li標簽</div></li> <li><div>我是第5個li標簽</div></li> </ul> </div> </body>
5、插入當前元素編號(指定種類)
<style> *{margin: 0;padding: 0;box-sizing: border-box;} li{list-style: none;} .content{ position: relative;padding: 10px; border: 1px solid #666;margin: 10px; } .fill-dom-index2 li{ position: relative; counter-increment: my2; } .fill-dom-index2 li div::before{ /* 第二個參數(shù)為list-style-type,可用值見: http://www.w3school.com.cn/cssref/pr_list-style-type.asp*/ content: counter(my2,lower-latin)'- '; color: #f00; font-weight: 600; } </style> <body> <h1>5、插入當前元素編號(指定種類)</h1> <div class="content fill-dom-index2"> <ul> <li><div>我是第1個li標簽</div></li> <div>我是li標簽中的第1個div標簽</div> <li><div>我是第2個li標簽</div></li> <li><div>我是第3個li標簽</div></li> <div>我是li標簽中的第2個div標簽</div> <li><div>我是第4個li標簽</div></li> <li><div>我是第5個li標簽</div></li> </ul> </div> </body>
以上就是本文的悉數(shù)內(nèi)容,盼望對大家的學習有所幫助,也盼望大家多多支持圖趣網(wǎng)。
[教程作者:佚名]
免責聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/wd498.html
本文地址:http://m.likemindfilms.com/tutorial/wd498.html
上一篇:通過CSS變量修改樣式的方法示例
下一篇:css加載會造成壅塞嗎
這些是最新的
最熱門的教程