甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多.如：
创新互联提供成都网站制作、成都网站建设、网页设计，成都品牌网站建设，广告投放等致力于企业网站建设与公司网站制作，十载的网站开发和建站经验,助力企业信息化建设，成功案例突破近千家,是您实现网站建设的好选择.
标签选择
element = document.querySelector('selectors');
elementList = document.querySelectorAll('selectors');
多标签
element = document.querySelector('selector1,selector2,...');
elementList = document.querySelectorAll('selector1,selector2,...');
iD 和class
element = document.querySelector('div#container');//返回id为container的首个div
element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素
elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div
jQuery本身在dom操作上速度就一般，jQuery只是原生JS的一个自定义框架，速度首先敢原生就差很远了。所以JQ跟HTML5原生自带的选择器根本就没办法比。当然有时候和JQ结合速度也会比你只使用上面说的选择器快，首先您得记住将DOM缓存起来 如：
var a=$("#a");//缓存元素
var b=$("#a").find(".b");//缓存元素
function doa(){
b.toggle();
}
//如果我们要执行一个点击就让b显示隐藏的话，也就是多次操作该DOM，上面的写法要比下面的快很多很多
function doa(){
y$("#a").find(".b").toggle();
}
CSS3 选择器大概有一下几个类型：
全局选择器 Universal Selector
类型选择器 Type Selector
属性选择器 Attribute Selectors
伪类 Pseudo-classes
伪元素 Pseudo-element
Class 选择器 Class Selectors
ID 选择器 ID Selectors
选择符 Combinator
下面是 W3C 官网上关于 Selector Level 3 的一个表格。我翻译了一下。
不同浏览器对 CSS 选择器有不同程度的支持，目前的浏览器（IE9前除外）已经支持了下面的绝大部分选择器。
* 任何元素
E 一个 E 类型的元素
E[foo] 拥有“foo”属性的E 元素
E[foo="bar"] 拥有属性值等于“bar”的“foo”属性的 E 元素
E[foo~="bar"] 一个 E 元素，它的“foo”属性值是通过空格分开的一系列的值，其中有一个值等于“bar”
E[foo^="bar"] 一个 E 元素，它的“foo”属性的值是一个以“bar”开头的字符串
E[foo$="bar"] 一个 E 元素，它的“foo”属性的值是一个以“bar”结尾的字符串
E[foo*="bar"] 一个 E 元素，它的“foo”属性值包含字符串“bar”
E[foo|="en"] 一个 E 元素，它的“foo”属性的值是通过连字符（-）分割的一系列的值的字符串，其中有一个值是以“en”开头
E:root 一个 E 元素，是文档的根元素
E:nth-child(n) 一个 E 元素，是它父元素的第 n 个子元素
E:nth-last-child(n) 一个 E 元素，是它父元素的倒数第 n 个子元素
E:nth-of-type(n) 一个 E 元素，在它同类型的兄弟元素中排在第 n 个
E:nth-last-of-type(n) 一个 E 元素，在它同类型的兄弟元素中排行倒数第 n 个
E:first-child 一个 E 元素，是它父元素的第一个子元素
E:last-child 一个 E 元素，是它父元素的最后一个子元素
E:first-of-type 一个 E 元素，是它同类型兄弟元素中的第一个
E:last-of-type 一个 E 元素，是它同类型的兄弟元素中的最后一个
E:only-child 一个 E 元素，是它父元素的唯一一个子元素
E:only-of-type 一个 E 元素，是它同类型的兄弟元素的唯一一个（没有别的同类的兄弟）
E:empty 一个没有子元素的 E 元素
E:link 一个没有被访问过的，作为超链接的锚点的 E 元素
E:visited 一个被访问过的锚点 E 元素
E:active 一个正处于某些用户操作状态的 E 元素
E:hover 一个鼠标滑过的 E 元素
E:focus 一个获得用户焦点的 E 元素
E:target 一个做为起 Refer 制定锚点的元素（url hash 相关）
E:lang(fr) 一个 language 是 fr 的 E 元素
E:enabled 一个UI 操作上 enabled 的 E 元素
E:disabled 一个 UI 操作上 disabled 的 E 元素
E:checked 一个 UI 操作上状态为 checked 的 E 元素
E::first-line E 元素中格式化后的第一行
E::first-letter E 元素的第一个字母
E::before 在 E 元素之前生成的内容
E::after 在 E 元素之后生成的内容
E.warning 一个class 属性包含 warning 的 E 元素
E#myid 一个 ID 为 myid 的 E 元素
E:not(s) 一个不匹配简单的选择器 s 的 E 元素
E F 一个作为 E 元素后代的 F 元素
E F 一个作为 E 元素子元素的 F 元素
E + F 一个紧跟在 E 元素后面的 F 元素
E ~ F 一个出现在 E 元素前面（紧挨着）的 F 元素
每天一更新，这些初级html知识你掌握了吗？
css选择器的优先级：作用的元素一样，样式一样，就会有优先级问题。
* 通配选择器 0
* 标签名选择器 1
* 类选择器 10
* id选择器 100
* 后代选择器 选择器1 选择器2 ...（会有相加的过程）
* 群组选择器 选择器1,选择器2,... (不会有相加的过程)
注意：
* 1.相同类型的选择器 样式冲突下 后覆盖前
* 2.不同类型的选择器 样式冲突下 优先级高覆盖优先级低
* 3.* Tags class id style !important
* 4.!important慎用(非得用的时候，要加注释说明一下)