国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css選擇器和jQuery選擇器

niuxiaowei111 / 2907人閱讀

摘要：通用選擇器組合子和否定偽類對特異性沒有影響。選擇器大部分還是和選擇器保持了一致，但是有以下一些部分的改動第一個元素最后一個元素所有偶數元素，索引值從開始，第一個元素是偶數，第二個元素是奇數，以此類推。

選擇器

在書寫樣式和查找節點的時候，選擇器是必不可少的，所以了解選擇器的書寫方式和使用就顯得極為重要，本文主要分開講了css選擇器和jQuery選擇器；

css選擇器

大家都可能知道，在瀏覽器渲染的時候會構建dom、cssom然后render，這里盜圖兩張：


看看就好了，本文還是講css和dom的關聯過程，書寫css的格式均是：

body .test{       //選擇器
    color:red;    //樣式名和值
}

看到就很熟悉，這里需要提醒大家，雖然書寫是從左至右，但是css的遍歷方式且是從右到左的方式，原因是從右至左的遍歷方式存在效率問題，因為一般寫在左邊的是父級元素、后邊跟著子元素，如果從左到右的查找，就會遍歷父級元素下的所有子元素，相反，如果從右至左的話，只需要找到子元素然后一級級的往上查找即可；
對于css的書寫規范可以參考：https://github.com/doyoe/html... 里面寫的還是很全的，現在開始講解選擇器問題，

基本類型選擇器

元素選擇器

類選擇器

id選擇器

通配符選擇器 * 【應該盡量少用】

屬性選擇器

這其中屬性選擇器的方式較為多樣，具體如下【大部分規則和正則有點類似】：
[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來標識不區分大小寫，

結合選擇器

相鄰兄弟選擇器 div + p 【表示p元素為選擇項，但是他的前方緊鄰的兄弟必須是div】

通用相鄰元素 div ~ p 【表示p元素為選擇項，但是他的前方必須有div兄弟元素，可以不緊鄰】

子選擇器 div > p 【表示p元素的直接父級元素必須是div才會匹配】

后代選擇器 div p 【空格即可，所少個空格無關】

自身選擇器 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 的  元素 
    所有 radio 按鈕都未被選中的  元素
    處于 indeterminate 狀態的  元素]
:in-range [input框的輸入內容在max min等限制的范圍內時候會匹配上]
:invalid [表示任何  或 
 元素的內容無法通過輸入的類型設置的驗證]
:lang  [element:lang(language-code) { style properties }主要是元素使用的語言]
:last-child [最后一個孩子元素]
:last-of-type [最后出現的類型]
:left [@page :left 配合打印來設置]
:link [鏈接]
:not() [:not(selector) 在選擇器上增加一層過濾的功能]
:nth-child []
    :nth-child(  [ of # ]? )
    where 
     =  | even | odd
    允許對子元素做一些算法操作，用以匹配某些想要匹配的節點
:nth-last-child [和上面的一樣，只是順序是從后往前數]
:nth-last-of-type [和上面一樣，只是不是統計子元素，而是子元素的類型為一種匹配，來匹配span的odd或者div類型的odd]
:nth-of-type []
:only-child []
:only-of-type []
:optional [表示任意沒有required屬性的  或