定义和用法
quotes 属性设置嵌套引用(embedded quotation)的引号类型。
可能的值
值 | 描述 |
---|---|
none | 规定 "content" 属性的 "open-quote" 和 "close-quote" 的值不会产生任何引号。 |
string string string string |
定义要使用的引号。 前两个值规定第一级引用嵌套,后两个值规定下一级引号嵌套。 |
inherit | 规定应该从父元素继承 quotes 属性的值。 |
例子
<html lang="en"> <head> <style type="text/css"> //quotes结合<q>标签使用 q:lang(en)//:lang选择器用于选取带有以指定值开头的 lang 属性的元素。 { quotes: '"' '"' "'" "'" } </style> </head> <body> <p><q>This is a <q>big</q> quote.</q></p> </body> </html>
输出:
未使用quotes属性输出效果:
quotes属性结合content:open-quote、close-quote属性使用:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .ask { quotes: '提问: "' '"'; } .answer { quotes: '回答: "' '"'; } .ask:before, .answer:before { content: open-quote; } .ask:after, .answer:after { content: close-quote; } </style> </head> <body> <p class="ask">你问我爱你有多深?</p> <p class="answer">月亮代表我的心</p> </body> </html>
输出结果:
取消quotes属性使用
<head> <meta charset="UTF-8"> <title>content生成技术</title> <style type="text/css"> /*.ask { quotes: '提问: "' '"'; } .answer { quotes: '回答: "' '"'; }*/ .ask:before, .answer:before { content: open-quote; } .ask:after, .answer:after { content: close-quote; } </style> </head> <body> <p class="ask">你问我爱你有多深?</p> <p class="answer">月亮代表我的心</p> </body>
输出结果: