大家好，我是IT修真院北京總院第24期的學(xué)員，一枚正直純潔善良的web程序員
今天給大家分享一下，修真院官網(wǎng)css任務(wù)15，深度思考中的知識(shí)點(diǎn)——知道CSS有個(gè)CONTENT屬性嗎？有什么作用？有什么應(yīng)用？
1.背景介紹
css有一個(gè)屬性叫做content。content只能使用在:after和:before之中。它用于在元素之前或者元素之后加上一些內(nèi)容
content屬性早在CSS2.1的時(shí)候就被引入了，可以使用:before以及:after偽元素生成內(nèi)容。此特性目前已被大部分的瀏覽器支持
在CSS 3 Generated Content工作草案中，content屬性添加了更多的特征，例如：插入以及移除文檔內(nèi)容的能力，以創(chuàng)建腳注，結(jié)語，及段落注釋。但是目前還沒有瀏覽器支持content的擴(kuò)展功能。
2.知識(shí)剖析
before和after是什么呢？
:before和:after的作用就是在指定的元素內(nèi)容（而不是元素本身）之前或者之后插入一個(gè)包含content屬性指定內(nèi)容的行內(nèi)元素.需要注意的是如果沒有content屬性，偽類元素將沒有任何作用。但是可以指定content為空，插入的內(nèi)容默認(rèn)是一個(gè)行內(nèi)元素，并且在HTML源代碼中無法看到，這就是為什么稱之為偽類元素的理由，所以也就無法通過DOM對(duì)其進(jìn)行操作。偽類元素也會(huì)像其他子元素一樣正常繼承父元素的一些CSS屬性，比如字體等。
3.常見問題
如何使用:after和:before中的content屬性呢？
4.解決方法
1.content屬性與 :before 及 :after 偽元素配合使用生成文本內(nèi)容
我是標(biāo)題h1！
5.編碼實(shí)戰(zhàn)
6.拓展思考
強(qiáng)大的CSS3 attr()方法。
過attr()將選擇器對(duì)象的屬性作為字符串進(jìn)行顯示
7.參考文獻(xiàn)
參考一：segmentfault上的css3 content詳解
參考二：張?chǎng)涡?CSS content內(nèi)容生成技術(shù)以及應(yīng)用
8.更多討論
content實(shí)際上很少的使用，它不可通過DOM使用，它只是純粹的表象。
密碼: p68a
感謝大家觀看
今天的分享就到這里啦，歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)、留言、拍磚~
技能樹.IT修真院
“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開始，找個(gè)師兄，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷?！?。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化，成長(zhǎng)可見化，師兄1對(duì)1免費(fèi)指導(dǎo)?？靵砼c我一起學(xué)習(xí)吧~
我的邀請(qǐng)碼：12361358，或者你可以直接點(diǎn)擊此鏈接：http://www.jnshu.com/login/1/12361358
