CSS是一种表现设计语言，是网页设计中页面表现与内容分离的关键性工具之一。还记得开始时介绍过的解析的概念吗？不象HTML，CSS是一种上下文无关语法，可以被介绍里所写的某种类型解析器处理。实际上CSS规范里也定义了CSS词法和语法规则（http://www.w3.org/TR/CSS2/grammar.html）。我们看一些例子，下面词法的每个元素都用正则表达式描述：
comment \/\*[^*]*\*+([^/*][^*]*\*+)*\/
num [0-9]+|[0-9]*"."[0-9]+
nonascii [\200-\377]
nmstart [_a-z]|{nonascii}|{escape}
nmchar [_a-z0-9-]|{nonascii}|{escape}
name {nmchar}+
ident {nmstart}{nmchar}*
ident是标识符的缩写，象类名一样，“name”是一个元素的id（用“#”指明）。
语法则用BNF定义。
ruleset
: selector [ ',' S* selector ]*
'{' S* declaration [ ';' S* declaration ]* '}' S*
;
selector
: simple_selector [ combinator selector | S+ [ combinator selector ] ]
;
simple_selector
: element_name [ HASH | class | attrib | pseudo ]*
| [ HASH | class | attrib | pseudo ]+
;
class
: '.' IDENT
;
element_name
: IDENT | '*'
;
attrib
: '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
[ IDENT | STRING ] S* ] ']'
;
pseudo
: ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
;
解释：一个规则集是这样的结构：
div.error , a.error {
color:red;
font-weight:bold;
}
div.error和a.error是选择器。花括号里内容包含了这个规则集所应用的规则。这种结构被如下规范的定义：
ruleset
: selector [ ',' S* selector ]*
'{' S* declaration [ ';' S* declaration ]* '}' S*
;
这就意味着规则集是一个选择器或者不定数量的以逗号或空格（大写S代表空格）分隔的选择器。一个规则集包含着花括号，里面是一个声明或者多个用分号隔开的声明。“声明”和“选择器”将在下面的BNF定义里定义。
Webkit的CSS解析器
Webkit使用Flxe和Bison解析器生成器来从CSS语法文件里自动生成解析器。你也会记得在解析器的介绍里，Bison生成一个自底而上移位归约解析器。Firefox则使用手工创建的自顶而下解析器。两种情况下CSS文件都会被解析成一个样式表对象，每个对象包含CSS规则。CSS规则对象包含选择器和声明对象，以及对应于CSS语法的其它对象。
图7：解析CSS
（待续）
原创文章，作者：苏葳，如需转载，请注明出处：https://www.swmemo.com/2051.html
