css选择器和jQuery选择器

选择器

在书写样式和查找节点的时候，选择器是必不可少的，因此了解选择器的书写方式和使用就显得极为重要，本文主要分开讲了css选择器和jQuery选择器；

css选择器

你们均可能知道，在浏览器渲染的时候会构建dom、cssom而后render，这里盗图两张：


看看就行了，本文仍是讲css和dom的关联过程，书写css的格式均是：

body .test{       //选择器
    color:red;    //样式名和值
}

看到就很熟悉，这里须要提醒你们，虽然书写是从左至右，可是css的遍历方式且是从右到左的方式，缘由是从右至左的遍历方式存在效率问题，由于通常写在左边的是父级元素、后边跟着子元素，若是从左到右的查找，就会遍历父级元素下的全部子元素，相反，若是从右至左的话，只须要找到子元素而后一级级的往上查找便可；
对于css的书写规范能够参考：https://github.com/doyoe/html... 里面写的仍是很全的，如今开始讲解选择器问题，

基本类型选择器

1. 元素选择器
2. 类选择器
3. id选择器
4. 通配符选择器 * 【应该尽可能少用】
5. 属性选择器

这其中属性选择器的方式较为多样，具体以下【大部分规则和正则有点相似】：
[attr]
表示带有以 attr 命名的属性的元素。
[attr=value]
表示带有以 attr 命名的，且值为"value"的属性的元素。
[attr~=value]
表示带有以 attr 命名的属性的元素，而且该属性是一个以空格做为分隔的值列表，其中至少一个值为"value"。
[attr|=value]
表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode编码为U+002D）开头。典型的应用场景是用来来匹配语言简写代码（如zh-CN，zh-TW能够用zh做为value）。
[attr^=value]
表示带有以 attr 命名的，且值是以"value"开头的属性的元素。
[attr$=value]
表示带有以 attr 命名的，且值是以"value"结尾的属性的元素。
[attr*=value]
表示带有以 attr 命名的，且值包含有"value"的属性的元素。
[attr operator value i]
在带有属性值的属性选型选择器表达式的右括号（]括号）前添加用空格间隔开的字母i（或I）能够忽略属性值的大小写（ASCII字符范围内的字母），后面加个i、I来标识不区分大小写，

结合选择器

1. 相邻兄弟选择器 div + p 【表示p元素为选择项，可是他的前方紧邻的兄弟必须是div】
2. 通用相邻元素 div ~ p 【表示p元素为选择项，可是他的前方必须有div兄弟元素，能够不紧邻】
3. 子选择器 div > p 【表示p元素的直接父级元素必须是div才会匹配】
4. 后代选择器 div p 【空格便可，所少个空格无关】
5. 自身选择器 div.test 【有class为test的div元素】

伪类选择器

伪类选择器能够当作是和类选择器相似的形式，只不过类class是使用.来表示，而伪类使用:来表示

:active  [当用鼠标交互时，它表明的是用户按下按键和松开按键之间的时间。 :active 伪类一般用来匹配tab键交互]
:any  [.a > :-moz-any(.b, .c) === .a .b,.a .c 这样的书写方便相一样式的元素的组合，试验阶段，少用为好]
:any-link [全部的超连接]
:checked  [一些选择表单元素被选择了，能够用于实现点击某些CheckBox来线上更多的模块]
:default []
:dir()  [文字书写方向 :dir(rtl) 文字从右到左  和属性选择器不一样，
    [dir=rtl] 或 [dir=ltr]不会匹配到dir属性的值为auto的元素。
    而 :dir()会匹配通过客户端计算后的属性, 不论是继承的dir值仍是dir值为auto的]
:disabled [被禁用的元素]
:empty  [没有子元素的元素。 这里说的子元素，只计算元素结点及文本（包括空格），注释、运行指令不考虑在内。]
:enabled [和disabled相反]
:first [@page :first 和打印配合，改变打印时的一些属性]
:first-child [element:first-child 第一个子元素]
:first-of-type [伪类匹配子元素中新的种类的元素（第一次出现元素类型就是新的）]
:fullscreen [实验性，全屏的时候匹配的某些元素的样式]
:focus [在一个元素成为焦点时生效，用户能够经过键盘或鼠标激活焦点]
:focus-within []
:hover [适用于用户使用指示设备虚指一个元素（没有激活它）的状况，大部分是指鼠标悬停]
:indeterminate [一下三种状况，
    indeterminate 属性被 JavaScript 置为 true 的 <input type="checkbox"> 元素 
    全部 radio 按钮都未被选中的 <input type="radio"> 元素
    处于 indeterminate 状态的 <progress> 元素]
:in-range [input框的输入内容在max min等限制的范围内时候会匹配上]
:invalid [表示任何 <input> 或 <form> 元素的内容没法经过输入的类型设置的验证]
:lang  [element:lang(language-code) { style properties }主要是元素使用的语言]
:last-child [最后一个孩子元素]
:last-of-type [最后出现的类型]
:left [@page :left 配合打印来设置]
:link [连接]
:not() [:not(selector) 在选择器上增长一层过滤的功能]
:nth-child []
    :nth-child( <nth> [ of <selector># ]? )
    where 
    <nth> = <an-plus-b> | even | odd
    容许对子元素作一些算法操做，用以匹配某些想要匹配的节点
:nth-last-child [和上面的同样，只是顺序是从后往前数]
:nth-last-of-type [和上面同样，只是否是统计子元素，而是子元素的类型为一种匹配，来匹配span的odd或者div类型的odd]
:nth-of-type []
:only-child []
:only-of-type []
:optional [表示任意没有required属性的 <input> 或 <textarea> 元素使用它. 它容许表单容易的展现可选字段而且渲染其外观.]
:out-of-range [表单元素在规定的范围外]
:placeholder-shown [:placeholder-shown 有placeholder文本的输入框]
:read-only [只读元素]
:read-write [可编辑元素]
:required []
:right []
:root []
:scope []
:target []
:valid [合符规范的]
:visited [被访问过的连接]

注意连接的匹配：须要遵循LVHA的前后顺序，即：:link — :visited — :hover — :active。

伪元素选择器

伪元素能够看作元素同样处理，大部分都还没标准化，用的较多的也就是::before ::after

::-moz-progress-bar []
::-moz-range-progress []
::-moz-range-thumb []
::-moz-range-track []
::-ms-fill []
::-ms-fill-lower []
::-ms-fill-upper []
::-ms-thumb []
::-ms-track []
::-webkit-progress-bar []
::-webkit-progress-value []
::-webkit-slider-runnable-track []
::-webkit-slider-thumb []
::after (:after)
::backdrop []
::before (:before)
::first-letter (:first-letter)
::first-line (:first-line) []
::selection

须要注意的是：因为选择器的权重问题，因此当多个选择器命中同一个元素时，须要根据权重肯定元素的具体样式【由情到重，不能越级进位】：

1. 类型选择器（type selectors）（例如, h1）和 伪元素（pseudo-elements）（例如, ::before）
2. 类选择器（class selectors） (例如,.example)，属性选择器（attributes selectors）（例如, [type="radio"]），伪类（pseudo-classes）（例如, :hover）
3. ID选择器（例如, #example）
4. 给元素添加的内联样式 (例如, style="font-weight:bold") 总会覆盖外部样式表的任何样式 ，所以可看做是具备最高的优先级。.
5. !important 规则例外
   当在一个样式声明中使用一个!important 规则时，此声明将覆盖任何其余声明。虽然技术上很重要与特异性无关，但它与它直接相关。

通用选择器（universal selector）(*), 组合子（combinators） (+, >, ~, ' ') 和 否认伪类（negation pseudo-class）(:not()) 对特异性没有影响。（可是，在 :not() 内部声明的选择器是会影响优先级，:not 否认伪类在优先级计算中不会被看做是伪类. 事实上, 在计算选择器数量时仍是会把其中的选择器当作普通选择器进行计数.）。

jQuery选择器

大部分仍是和css选择器保持了一致，可是有如下一些部分的改动：

:first    $("p:first")    第一个 <p> 元素
:last    $("p:last")    最后一个 <p> 元素
:even    $("tr:even")    全部偶数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
:odd    $("tr:odd")    全部奇数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
:eq(index)    $("ul li:eq(3)")    列表中的第四个元素（index 值从 0 开始）
:gt(no)    $("ul li:gt(3)")    列举 index 大于 3 的元素
:lt(no) $("ul li:lt(3)")    列举 index 小于 3 的元素
:header    $(":header")    全部标题元素 <h1>, <h2> ...
:animated    $(":animated")    全部动画元素
:contains(text)    $(":contains('Hello')")    全部包含文本 "Hello" 的元素
:has(selector)    $("div:has(p)")    全部包含有 <p> 元素在其内的 <div> 元素
:hidden    $("p:hidden")    全部隐藏的 <p> 元素
:visible    $("table:visible")    全部可见的表格
[attribute$=value]    $("[href$='.jpg']")    全部带有 href 属性且值以 ".jpg" 结尾的元素
:input    $(":input")    全部 input 元素
:text    $(":text")    全部带有 type="text" 的 input 元素
:password    $(":password")    全部带有 type="password" 的 input 元素
:radio    $(":radio")    全部带有 type="radio" 的 input 元素
:checkbox    $(":checkbox")    全部带有 type="checkbox" 的 input 元素
:submit    $(":submit")    全部带有 type="submit" 的 input 元素
:reset    $(":reset")    全部带有 type="reset" 的 input 元素
:button    $(":button")    全部带有 type="button" 的 input 元素
:image    $(":image")    全部带有 type="image" 的 input 元素
:file    $(":file")    全部带有 type="file" 的 input 元素

大部分仍是在原有的上面作了一些添加。