20.3.7 在字符串两边添加嵌套文字符号
可以使用content属性的open-quote属性值与close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote属性值用于添加开始的嵌套文字符号,close-quote属性值用于添加结尾的嵌套文字符号。
另外,在元素的样式中使用quotes属性来指定使用什么嵌套文字符号。
对于嵌套文字符号的添加功能,目前Firefox浏览器、Opera浏览器,Chrome浏览器与Safari浏览器均对其提供支持。
代码清单20-9为添加嵌套文字符号的一个示例,在该示例中有一个h1标题元素,文字为"标题",使用before选择器与after选择器在标题文字两边添加括号。
代码清单20-9 添加嵌套文字符号的示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>添加嵌套文字符号的示例</title>
</head>
<style type="text/css">
h1:before{
content: open-quote;
}
h1:after{
content: close-quote;
}
h1{
quotes:"(" ")";
}
</style>
<body>
<h1>标题</h1>
</body>
</html>
当需要添加双引号时,需要使用"\"转义字符,使用方法如下所示。
h1{
quotes:"\"" "\"";
}
代码清单20-9的运行结果如图20-15所示。
图20-15 添加嵌套文字符号的示例