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 元素

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