CSS選擇器技巧分享給大家,供大家參考,具體內(nèi)容如下
什么是:before和:after? 該如何使用他們?
:before是css中的一種偽元素,可用于在某個(gè)元素之前插入某些內(nèi)容。
:after是css中的一種偽元素,可用于在某個(gè)元素之后插入某些內(nèi)容。
下面我們先跑個(gè)簡(jiǎn)單的代碼測(cè)試下效果:
CSS Code復(fù)制內(nèi)容到剪貼板
<style>
p:before{
content: "H" /*:before和:after必帶技能,重要性為滿5顆星*/
}
p:after{
content: "d" /*:before和:after必帶技能,重要性為滿5顆星*/
}
</style>
<p>ello Worl</p>
以上的代碼將會(huì)在頁(yè)面中展現(xiàn)的是"Hello World"。我們通過(guò)瀏覽器的"審查元素"看到的內(nèi)容是:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<p>
::before
"ello Worl"
::after</p>
p標(biāo)簽內(nèi)部的內(nèi)容的前面會(huì)被插入一個(gè):before偽元素,該偽元素內(nèi)包含的內(nèi)容是"H";而在p標(biāo)簽內(nèi)的內(nèi)容后面會(huì)被插入一個(gè):after偽元素,該元素包含的內(nèi)容是"d"。作為一只合格的程序猴子,捍衛(wèi)"Hello World"的完整存在是必要的。
既然筆記主要針對(duì)是:before和:after,那么肯定不會(huì)只是僅僅有以上的簡(jiǎn)單介紹就完事。下面我們看看平常該怎么使用他們。
1.結(jié)合border寫個(gè)對(duì)話框的樣式
本獸將上面這句話拆成2部分:結(jié)合border,寫個(gè)對(duì)話框的樣式。
既然是結(jié)合border,那么我們先轉(zhuǎn)個(gè)小話題,簡(jiǎn)單由淺入深的介紹下怎么用border畫三角形樣式(這個(gè)三角形在寫對(duì)話框樣式的時(shí)候需要):
CSS Code復(fù)制內(nèi)容到剪貼板
<style>
.triangle{
width: 0;
height: 0;
border-left:50px solid red;
border-bottom:50px solid blue;
border-top:50px solid black;
新聞熱點(diǎn)
疑難解答
圖片精選