当然，现代的库都判断了浏览器是否实现了 w3c selector-api
，如果没有才采用下面的方法，目前只有ie系列会执行了。
以前分析过 extjs 的css 选择器实现 ，也粗略看过 jquery的css 选择器实现，这次又看了 yui3的选择器实现，发现每种实现都不同，而yui3或许不是效率最高的一个，却是实现起来最简单的一个。
Extjs 与 Jquery
?
extjs ,jquery都是属于自顶向下的分析方法，不同之处在于jquery将复杂选择符分解为简单单元后直接开始查找，去重，而extjs则分为编译与执行两个阶段，编译期生成对应选择器的dom操作函数，执行器直接执行生成函数即可：
div span
jquery 每次都分析选择器字符串，如分解为为["div","span"],然后再找到页面所有 div，再对这些div的所有子孙span进行合并去重得到最终结果。
extjs 则只有在第一次分析选择符字符串，生成了下列命令组成的函数：
?
alert(Ext.DomQuery.compile("div span"));
//解析 selector 字串在编译期已经做了
//递归也不需要，直接生成调用序列
function (root) {
var mode;
++batch;
var n = root || document;
//获取元素
n = getNodes(n, mode, "div");
mode = "";
n = getNodes(n,mode, "span");
//过滤元素
return nodup(n);
}
?以后每次相同的选择器字符串只需直接执行函数即可。
对于复杂的选择符，extjs，jquery都需要经过分析，选择，合并，过滤，去重 的阶段。
?
?
?
YUI3 css selector :
?
而 yui3 选择了同以上两者都不同的策略，即自底向上的分析方法，降低了难度，对于
div span
首先分解出单元选择器 ["div","span"] （每个单元有复杂的数据结构），然后取出文档中的所有span元素，再对这些span元素进行过滤，条件为是否父(祖先)元素为div。只需执行过滤操作即可，没有必要执行合并与去重操作。
?
总体来说：yui3 包括 分析与选择，过滤 阶段。代码包括：dom-debug.js，selector-css3-debug.js
?
?
分析：
?
Y.Selector._tokenize 函数，将选择符分解为 combinator 分割的简单选择符，combinator 在css2下面包括
?
combinators: {
' ': {
axis: 'parentNode'
},
'>': {
axis: 'parentNode',
direct: true
},
'+': {
axis: 'previousSibling',
direct: true
}
},
?
并将它们对应到相应的dom节点的运动方位。
对应简单的选择符yui3其实就分为三类：
属性选择符，其中id，class被简化到这个类别
?
{
name: ATTRIBUTES,
re: /^\[(-?[a-z]+[\w\-]*)+([~\|\^\$\*!=]=?)?['"]?([^\]]*?)['"]?\]/i,
fn: function(match, token) {
var operator = match[2] || '',
operators = Y.Selector.operators,
test;
// add prefiltering for ID and CLASS
if ((match[1] === 'id' && operator === '=') ||
(match[1] === 'className' &&
document.documentElement.getElementsByClassName &&
(operator === '~=' || operator === '='))) {
token.prefilter = match[1];
token[match[1]] = match[3];
}
// add tests
if (operator in operators) {
test = operators[operator];
if (typeof test === 'string') {
match[3] = match[3].replace(Y.Selector._reRegExpTokens, '\\$1');
test = Y.DOM._getRegExp(test.replace('{val}', match[3]));
}
match[2] = test;
}
if (!token.last || token.prefilter !== match[1]) {
return match.slice(1);
}
}
}
?
标签选择符
?
{
name: TAG_NAME,
re: /^((?:-?[_a-z]+[\w-]*)|\*)/i,
fn: function(match, token) {
var tag = match[1].toUpperCase();
token.tagName = tag;
if (tag !== '*' && (!token.last || token.prefilter)) {
return [TAG_NAME, '=', tag];
}
if (!token.prefilter) {
token.prefilter = 'tagName';
}
}
}
?
?
?
伪类选择符
?
{
name: PSEUDOS,
re: /^:([\-\w]+)(?:\(['"]?(.+)['"]?\))*/i,
fn: function(match, token) {
var test = Selector[PSEUDOS][match[1]];
if (test) { // reorder match array
return [match[2], test];
} else { // selector token not supported (possibly missing CSS3 module)
return false;
}
}
}
?
其中的re即为分解选择符时用到的正则表达式，而fn则是附加到简单的选择符上面，用来过滤阶段的判断。
而 伪类和 combinator以及属性判断操作符都是动态从集合中取得：
?
//伪类对应过滤操作方式
Selector[PSEUDOS]
//连接符
combinators: {
对应元素与对应dom方位操作
}
//属性判断操作符对应正则式
operators[operator]
?
则这就是yui3 css选择器部分的扩展机制 ，例如selector-css3-debug.js就是扩展了上述三者：
则最后给个复杂例子，如
#id1 div > a[href~='yiminghe'].ovcls
根据连接符则分为三个简单选择符：
每个结构的tests即为当前的过滤条件，而combinator即为通过当前过滤条件后的下一个将要检测的节点。注意direct属性，若direct为true，则表示失败后，结束，而direct为false，则表述还可以继续循着这个方向检测，如
" " direct为false，则父节点检测失败后，可以继续检测祖父节点。如 div span， 假设dom树中 span的父节点为 td，则如果td的父节点为div也是可以的。而 ">" direct就为true了，表示父节点不通过，这个节点就被过滤掉了。
选择过滤阶段：
分析出简单选择符后就简单了，Y.Selector._bruteQuery函数：取出最后一个简单选择符的对应文档元素 ，这步可以利用 id，tag，以及class（支持getElementsByClassName）。
剩下的就是单纯过滤了：
?
Y.Selector._filterNodes函数：
?
对选择阶段选出的所有元素，按简单选择符从后往前根据combinator定方位来变换检测节点，以及根据tests检测是否符合简单选择符，若一直到第1个简单选择符都符合，则当前节点保留，否则就过滤掉了。
?
?
?
?
?
?