在公式的打印输出中,括号时较难处理的一个环节,稍不注意,就容易遗忘括号的闭合,而结合使用CSS中content与quote属性可轻松实现括号的自动闭合,并能添加自定义样式。
以要输出下面的公式为例:
{a * [b / (c + d)]}
首先设计如下的HTML结构:
<i class="quote">a*
<i class="quote">b /
<i class="quote">c + d</i>
*
<i class="quote">e - f</i>
</i>
</i>
然后添加如下的样式即可。
<style type="text/css">
.quote {
/*括号的嵌套, 第一对为顶层括号,第二对为次层括号,第三队为末层括号*/
quotes: '{' '}' '[' ']' '(' ')';
}
/* 括号的开始位置 */
.quote::before {
color : red;
font-weight : bolder;
content: open-quote;
}
/* 括号的结束位置 */
.quote:after {
color : red;
font-weight : bolder;
content: close-quote;
}
</style>
结论
通过content属性可大幅减少公式中成对括号闭合的难度。