quotes

quotes

此特徵宣告左括號（open-quote）與右括號（close-quote），可以配合 content 特徵使用。可設定的值有：

1. <string>：設定 字串。 宣告一對字串，用作左括號與右括號。可以一次宣告數個字串對，前面的用在外層，後面的用在內層。
2. none：沒有括號。
3. inherit：繼承父元素的特徵值。

<div style='quotes:"《" "》" "『" "』" "【" "】"'> <q>第一層<q>第二層<q>第三層夾括號</q>角括號</q>箭括號</q> </div>

• 上例 Firefox 成功；IE6, Safari, Chrome 失敗。

配合 :after, :before, content 使用。 <style type='text/css'> .quo {quotes:' { ' ' } ' ' [ ' ' ] ' ' ( ' ' ) ' } .quo SPAN:before {content:open-quote; color:red; font-size:140%} .quo SPAN:after {content:close-quote; color:blue; font-size:140%} </style> <div class=quo> <span>第一層<span>第二層<span>第三層圓括號 </span>方括號</span>曲括號</span> </div>

• IE6 沒有支援 :after, :before；IE8, Firefox 會展現指定的括號。Safari, Chrome 沒有展現括號。

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type='text/css'> .hvr {quotes:"《" "》"} .hvr:before {content:open-quote; color:red; font-size:200%;} .hvr:after {content:close-quote; color:red; font-size:200%;} .hvr:hover {quotes:"『" "』";} .hvr:active {quotes:"【" "】";} </style> <span class=hvr> 好玩遊戲 </span>

• 上例，Firefox 成功；Safari, Chrome 失敗。

javascript 應用。可以用 style 物件 的特徵 quotes 讀取或設定特徵值。 <div id='atr3' style='quotes:"《" "》" "『" "』" "【" "】"; background:blue; width:200px; height:150px'> 射擊遊戲, 益智遊戲, <q>好玩遊戲</q>, 搏擊遊戲, 賽車遊戲, 小遊戲. </div> <script type='text/javascript'> var os=document.getElementById('atr3').style; document.write( os.quotes ); </script>

• IE6, Firefox 有輸出； Safari, Chrome 沒有 quotes。