這篇文章主要講解了“content如何搭配quotes使用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“content如何搭配quotes使用”吧！

創(chuàng)新互聯(lián)公司2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站建設(shè)、成都網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元合江做網(wǎng)站,已為上家服務(wù),為合江各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

在CSS里有個(gè)不常用的屬性就是quotes，這是做為定義「括號(hào)格式」的屬性，也就是如果在一段文字被包住，這段文字的前后就會(huì)出現(xiàn)自定義的標(biāo)簽替換（可以是括號(hào)、特殊符合、文字等），而且quotes支持多層嵌套，也就是你可以一層層的寫下去，以下面這段HTML文字舉例：

最外層第一層第二層第二層第三層

quotes 的屬性如果只寫一層，就會(huì)看到只出現(xiàn)一種括號(hào)，前后括號(hào)使用空白分隔，兩組為一個(gè)單位，前后可以不同符號(hào)。

q{
 quotes: ' < ' ' > ';
}

如果寫了三層，就會(huì)看到出現(xiàn)三種括號(hào)，也會(huì)把文字當(dāng)作括號(hào)使用。

q{
 quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}

（請(qǐng)注意開合標(biāo)簽的就近分配原則）

同樣的道理，我們可以應(yīng)用在content里面，而且通過偽元素::before和::after處于前后的預(yù)設(shè)位置，甚至不用就實(shí)現(xiàn)前后括號(hào)的效果，以下面這段HTML文字舉例，把剛剛的q全部換成span：

最外層第一層第二層第二層第三層

CSS的部分比較特別，在偽元素content里使用了open-quote (啟始括號(hào))和close-quote (結(jié)束括號(hào))這兩個(gè)有趣的值，換句話說open-quote對(duì)應(yīng)到，close-quote對(duì)應(yīng)到，此外也由于括號(hào)是在偽元素內(nèi)，就可以指定不同的顏色或樣式了。

span{
 quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}
span::before{
 content:open-quote;
 color:red;
}
span::after{
 content:close-quote;
 color:#aaa;
}

感謝各位的閱讀，以上就是“content如何搭配quotes使用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)content如何搭配quotes使用這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！