js 实现css风格选择器（压缩后2KB）

要实现CSS风格的选择器，我们需要在JavaScript中通过正则表达式和递归算法实现一个选择器引擎。这个引擎接收两个参数，一个是选择器字符串，另一个是上下文DOM元素。具体实现步骤如下：

1. 将选择器字符串进行分组

如：".box li.active span"
分为：
- .box
- li
- .active
- span

2. 逆序遍历分组

从最后一个分组开始向上遍历，先选出最顶层的元素，然后匹配每个分组中对应的元素，直到匹配到整个选择器的范围。

3. 分别处理每个分组

遍历每个分组，根据分组内容匹配对应的元素，获得新的目标元素集合。

4. 递归调用选择器引擎函数

根据上一个目标元素集合和上一个分组，递归调用选择器引擎函数获取下一个目标元素集合

5. 返回最终匹配结果

在所有分组都处理完成后，返回最终匹配的元素集合。

以下是一个简单的示例:

<div class="box">
  <ul>
    <li class="active">
      <span>hello</span>
    </li>
    <li>
      <span>world</span>
    </li>
  </ul>
</div>

function SelectorEngine(selector, context) {
  var allMatches = [];

  // 将选择器字符串分组
  var groups = selector.split(' ').reverse();

  // 处理第一个分组
  var matches = MatchGroup(groups[0], context);
  var lastMatchGroup = groups[0];

  for (var i = 1; i < groups.length; i++) {
    // 处理每个分组
    var currentMatchGroup = groups[i];
    matches = MatchGroup(currentMatchGroup, context, lastMatchGroup, matches);

    // 递归调用选择器引擎
    lastMatchGroup = currentMatchGroup;
    allMatches = matches;
  }

  // 返回最终匹配结果
  return allMatches;
}

function MatchGroup(selector, context, lastMatchGroup = null, lastMatches = []) {
  var matches = [];

  // 分离选择器分类
  var selectors = selector.split(/(?=[.#])/);

  // 处理选择器分类
  selectors.forEach(function(selector) {
    var firstChar = selector.charAt(0);
    // 区分类选择器和 ID选择器
    if (firstChar === '.') {
      // 查询选择器对应的元素
      var className = selector.slice(1);
      var elements = context.getElementsByClassName(className);

      // 限制上级元素为上一个分组的结果集
      if (lastMatchGroup && lastMatchGroup.charAt(0) === '>') {
        elements = FilterByParent(elements, lastMatches);
      }

      // 添加进匹配结果集
      matches.push.apply(matches, elements);
    } else if (firstChar === '#') {
      var id = selector.slice(1);
      var element = context.getElementById(id);
      matches.push(element);
    } else {
      // 其他选择器类型的匹配处理
    }
  });

  return matches;
}

function FilterByParent(elements, parents) {
  var result = [];
  parents.forEach(function(parent) {
    Array.prototype.forEach.call(elements, function(element) {
      if (element.parentNode === parent) {
        result.push(element);
      }
    });
  });
  return result;
}

// 使用选择器引擎查询元素
var matches = SelectorEngine('.box li.active span', document);

以上代码实现了一个简单的选择器引擎，查询匹配.box li.active span的元素，输出的匹配结果是[<span>hello</span>]。