• 浏览器CSS解析的词法语法初步介绍

    BNF 格式描述
    服务器君一共花费 14.273 ms 进行了 3 次数据库查询,努力地为您提供了这个页面。
    广告很萌的

    和 HTML 不同,CSS 是上下文无关的语法,可以使用简介中描述的各种解析器进行解析。事实上,CSS 规范定义了 CSS 的词法和语法

    让我们来看一些示例吧。

    词法语法(词汇)是针对各个标记用正则表达式定义的:

    • 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”是标识符 (identifier) 的缩写,比如类名。“name”是元素的 ID(通过“#”来引用)。

    语法是采用 BNF(Backus-Naur Form) 格式描述的。

    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 表示空格)分隔的多个(数量可选)选择器。规则集包含了大括号,以及其中的一个或多个(数量可选)由分号分隔的声明。

更多 推荐条目

Welcome to NowaMagic Academy!

现代魔法 推荐于 2013-02-27 10:23   

本章最新发布
随机专题
  1. [计算机算法] 从双端队列引出的卡特兰数 3 个条目
  2. [数据结构] 散列表(哈希表) 13 个条目
  3. [软件工程与项目管理] 呈现树的构建 13 个条目
  4. [数据库技术] 数据库范式篇 5 个条目
  5. [智力开发与知识管理] 整体性学习策略 9 个条目
  6. [移动开发] Android Studio里的Gradle 3 个条目
  7. [移动开发] Android View注入框架Butter Knife 3 个条目
  8. [PHP程序设计] 命令式编程范式 6 个条目
  9. [PHP程序设计] fsockopen,curl与file_get_contents 12 个条目
  10. [移动开发] Android SQLite增删查改实例(数据:魔弹之王) 2 个条目
  11. [Python程序设计] urls.py设置技巧 8 个条目
  12. [PHP程序设计] 对输入文件类型的检测 1 个条目
窗口 -- [博客]