Selector

关于选择器

此WIKI页面主要为了说清选择器支持度, 方便测试、使用

在开始前废话下选择器结构分类

1. 本页通常所指的选择器即为 简单选择器(Simple Selector)
2. nes支持所有 __nes支持的__的简单选择器无缝相接组成的复合选择器(Compound Selector)
3. nes支持所有w3c定义的连接符: ~、+、>、" "(空格)并且支持复合选择器通过它们相接的复杂选择器(Complex Selector)
4. nes支持复杂选择器通过分隔符,相接的选择器序列(Selector List)

好，接下来可以详细说明下nes支持的简单选择器了

nes支持的选择器

支持的选择器以Selector level 4为参考，没有实现一些规范外的选择器

全部支持的部分

1. 通配选择器: *
2. ID选择器: #home
3. 标签选择器: p、div、img...etc
4. 类选择器: .m-list
5. 属性选择器:
6. [foo] : 代表节点拥有foo这个属性
7. [foo~=bar] : 代表节点foo属性的值是一个由空格分隔的序列(可以是单值)，这个序列中包含bar元素。如'bar bar1'
8. [foo=bar ] : 代表节点foo属性的值全等于'bar'
9. [foo^=bar] : 代表节点foo属性的值开始于'bar',如'bar1'
10. [foo$=bar] : 代表节点foo属性的值终止于'bar',如'1bar'
11. [foo|=bar] : 代表节点foo属性的值是一个用'-'分隔的序列(可以使单值), 这个序列中包含bar元素. 如'bar-bar1'
12. [foo*=bar] : 节点foo属性的值包含'bar'
13. [foo!=bar] : 节点foo属性的值不等于'bar' ,注意 不属于规范，但是确实有用

部分支持——伪类选择器(pesudo-class)

说下支持的部分

1. :first-child、:last-child : 分别代表节点是其所有同级节点中的第一个、最后一个元素
2. :first-of-type、:last-of-type :分别代表节点是其所有同级节点中的第一个、最后一个与其拥有相同节点名(nodeName)的元素
3. :only-child: 它是其父节点的唯一子节点
4. :only-of-type: 它是其父节点中的子节点中的唯一一个同类型(nodeName)的子节点
5. :nth-child(an+b)、:nth-last-child(an+b) : 请参考W3C定义，an+b代表的具体就是它在所有同级节点中位置条件
6. :nth-of-type(an+b)、:nth-last-of-type(an+b) : 同上，区别是这些同级节点与其需有相同节点名
7. :nth-match(n of selector)、:nth-last-match(n of selector):分别代表节点是其所有同节点中第n个、倒数第n个满足选择器selector的元素,这是个 Level 4 选择器
8. :not(s1, s2...) : 节点不满足选择器s1 和 s2(可以有更多个选择器), 规范中只支持复合选择器即不支持连接符, nes支持完整的复杂选择符, (Level 4 选择器)
9. :matches(s1, s2..): 与上相反, 节点满足选择器s1 或 s2(可以有更多个选择器), 同样支持复杂选择器 (Level 4 选择器)
10. :target : 节点是当前文档hash中所指的节点
11. :focus : 节点是当前文档的focus的节点(请按你的tab感受下focus)
12. :empty : 节点没有任何直接子元素(包括text 节点)
13. :selected、:checked : 表单伪类不多说
14. :disabled、:enabled : 不多说

特别说下不支持的部分, 有些是支持不了、有些是觉得没有用，如果有实现方法或者需求的可以贡献下代码或者通知我，万分感谢

1. 所有dynamic 伪类都不支持类似 :hover、:active 等等·
2. 其他所有level4选择器都不支持
3. :root: 没啥用、并且我对什么是文档根部产生了疑惑
4. :dir、:lang

完全不支持的部分——伪元素选择器(pesudo-element)