文档

Demo：http://army8735.me/migijs/jaw/demo/
你可以在上述地址中输入css样式查看格式化后的结果，它是个json格式，直接赋值给migi的style属性生效。

目前支持的css选择器种类：

• id选择器
• class选择器
• tagName标签选择器
• *选择器
• 关系选择器
• ,
• blank
• 伪类
• :hover
• :active
• :first-child
• :last-child
• 属性选择器
• [name]
• [name=value]
• [name*=value]
• [name^=value]
• [name|=value]
• [name$=value]
• [name~=value]

结构概述

.a .b{margin:0}

{
  ".b": {
    ".a": {
      "_v": [
        [
          0,
          "margin:0"
        ]
      ],
      "_p": 20
    }
  },
  "_d": 1
}

一个常见选择器首先会被转化为类似逆波兰式的结构：即尾部的选择器在前，头部的选择器在后。
示例中最外层是尾部的.b，然后才是头部的.a。

选择器样式

.a{margin:0;padding:0}

{
  ".a": {
    "_v": [
      [
        0,
        "margin:0"
      ],
      [
        0,
        "padding:0"
      ]
    ],
    "_p": 10
  }
}

一个选择器对应的样式存储在_v属性上，以数组形式表示，因为样式可能有多个。
示例中有margin和padding2种。

顺序和优先级

.a{margin:0}
html .a{margin:auto}

{
  ".a": {
    "_v": [
      [
        0,
        "margin:0"
      ]
    ],
    "_p": 10,
    "html": {
      "_v": [
        [
          1,
          "margin:auto"
        ]
      ],
      "_p": 11
    }
  },
  "_d": 1
}

_v同级的_p表示其对应的优先级，_v中的每项样式是个长度为2的数组：顺序和样式值。
最终生效时结合优先级和顺序，符合css规范。

深度优化

.a{margin:0}

{
  ".a": {
    "_v": [
      [
        0,
        "margin:0"
      ]
    ],
    "_p": 10
  }
}

_d标明当前json对象的深度：即还有多少子对象嵌套层级。这对于选择器匹配性能优化很有帮助。
假若有如下DOM结构：

<div class="b">
  <span class="a"></span>
</div>

在匹配时逆向进行，.a匹配成功，DOM可能还要往上遍历.b，但由于深度不存在（为0），所以停止遍历，加快匹配速度。

伪类实现

a:hover{margin:0}

{
  "a": {
    "_:": [
      [
        [
          "hover"
        ],
        {
          "_v": [
            [
              0,
              "margin:0"
            ]
          ],
          "_p": 2
        }
      ]
    ]
  }
}

所有伪类会记录在_:属性里，里面是个数组：可能有多种伪类选择器并列。
每个伪类项又是个长度为2的数组：第1个是伪类列表（可能某个选择器有多个伪类）；第2个是递归json对象。

属性

a[href]{margin:0}

{
  "a": {
    "_[": [
      [
        [
          [
            "href"
          ]
        ],
        {
          "_v": [
            [
              0,
              "margin:0"
            ]
          ],
          "_p": 11
        }
      ]
    ]
  }
}

属性存在_[属性里，其结构同上。