CSS3 quotes

admin發表於2019-03-28
CSSS3

quotes屬性可能在實際專案中較少用到，因為它的功能並不是不可替代。

當然也不能太絕對，也許在某些功能中能夠起到比較好的效果。

下面通過程式碼例項介紹一下它的用法，首先從其名字入手。

quote翻譯成漢語具有"引號"的意思，引號都是成對出現的，用於包裹指定內容。

名副其實，此屬性可以用於定義元素內使用的巢狀標記，所謂巢狀標記就是我們所說的"引號"。

這個引號是廣義的，並不僅僅指通常意義上的單引號或者雙引號，後面會有程式碼演示。

語法結構：

[CSS] 純文字檢視 複製程式碼
quotes：none | [<string> <string>]

引數解析：

（1）.none：當屬性值為none的時候，不會生成任何標記。

（2）.<string>：規定巢狀標記，兩個為一組，組之間用空格隔開，可以有多個組。

特別說明：每一個巢狀標記用引號包裹，巢狀標記必須成對的出現。

此屬性通常與content屬性配合使用，還有一些細節後面會通過例項展示。

瀏覽器支援：

（1）.IE8+瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.火狐瀏覽器支援此屬性。

（5）.opera瀏覽器支援此屬性。

（6）.safria瀏覽器支援此屬性。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
li{list-style:none}
li > q{quotes:"'" "'"} 
</style> 
</head>
<body> 
<ul> 
  <li><q>螞蟻部落</q></li> 
</ul> 
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201903/28/134939m0vf3zxzcvnfzuox.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.字串用<q>標籤包裹，這個很重要，當前如果換做其他標籤不會有任何效果。

（2）.目的是使用單引號包裹字串，所以將前後單引號分別使用雙引號包裹，之間用空格分隔。

（3）.如果想用雙引號包裹字串，那麼可以用單引號分別包裹雙引號，大家可以自行演示。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
li{list-style:none}
li > q{quotes:"[" "]" '<' '>'} 
</style> 
</head> 
<body> 
<ul> 
<li><q>螞蟻部落<q>青島市南區</q></q></li> 
</ul> 
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201903/28/135003wl5zzdyayhxhp5c0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.包裹字串的標記比一定非要是單引號或者雙引號也可以是其他字元。

（2）.可以一次定義多組標記，組與組之間使用空格分隔。

（3）.多組標記之間會形成巢狀關係，從上述程式碼的表現可以很清晰的觀察到。

特別說明：上述兩個程式碼中，quotes屬性只會對<q>標籤有效，其他標籤沒有任何效果。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
li{list-style:none}
li > span{quotes:"'" "'"} 
</style> 
</head>
<body> 
<ul> 
  <li><span>螞蟻部落</span></li> 
</ul> 
</body> 
</html>

上面程式碼就不截圖了，沒有巢狀效果，這時候，可以使用content屬性解決此問題。

content屬性非常強大，CSS中很多效果都要藉助於它，更多內容參閱CSS content 屬性一章節。

它有兩個屬性值與quotes屬性相關，分別是open-quote和close-quote，分別對應quotes規定標記的起始標記與閉合標記。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
li{list-style:none}
li > span{quotes:"'" "'"} 
li > span:before { content: open-quote; }
li > span:after { content: close-quote; }
</style> 
</head>
<body> 
<ul> 
  <li><span>螞蟻部落</span></li> 
</ul> 
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201903/28/135059afo4c8oogrgzido8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到字串又一次被單引號包裹。

通過利用conent屬性可以讓quotes屬性更加強大靈活，雖說實際應用中出現相對較少。

難保在某些時候會發揮奇效，多學點知識沒有任何壞處只有好處，大廈是由千萬塊磚頭壘砌。

看起來每一塊磚都很渺小，但是誰知道關鍵時刻那塊磚會起到決定性作用，不要輕視任何知識點。

相關文章