成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css選擇器和jQuery選擇器

niuxiaowei111 / 2906人閱讀

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

選擇器

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

css選擇器

大家都可能知道，在瀏覽器渲染的時(shí)候會(huì)構(gòu)建dom、cssom然后render，這里盜圖兩張：


看看就好了，本文還是講css和dom的關(guān)聯(lián)過程，書寫css的格式均是：

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

看到就很熟悉，這里需要提醒大家，雖然書寫是從左至右，但是css的遍歷方式且是從右到左的方式，原因是從右至左的遍歷方式存在效率問題，因?yàn)橐话銓懺谧筮叺氖歉讣?jí)元素、后邊跟著子元素，如果從左到右的查找，就會(huì)遍歷父級(jí)元素下的所有子元素，相反，如果從右至左的話，只需要找到子元素然后一級(jí)級(jí)的往上查找即可；
對(duì)于css的書寫規(guī)范可以參考：https://github.com/doyoe/html... 里面寫的還是很全的，現(xiàn)在開始講解選擇器問題，

基本類型選擇器

元素選擇器

類選擇器

id選擇器

通配符選擇器 * 【應(yīng)該盡量少用】

屬性選擇器

這其中屬性選擇器的方式較為多樣，具體如下【大部分規(guī)則和正則有點(diǎn)類似】：
[attr]
表示帶有以 attr 命名的屬性的元素。
[attr=value]
表示帶有以 attr 命名的，且值為"value"的屬性的元素。
[attr~=value]
表示帶有以 attr 命名的屬性的元素，并且該屬性是一個(gè)以空格作為分隔的值列表，其中至少一個(gè)值為"value"。
[attr|=value]
表示帶有以 attr 命名的屬性的元素，屬性值為“value”或是以“value-”為前綴（"-"為連字符，Unicode編碼為U+002D）開頭。典型的應(yīng)用場(chǎng)景是用來(lái)來(lái)匹配語(yǔ)言簡(jiǎn)寫代碼（如zh-CN，zh-TW可以用zh作為value）。
[attr^=value]
表示帶有以 attr 命名的，且值是以"value"開頭的屬性的元素。
[attr$=value]
表示帶有以 attr 命名的，且值是以"value"結(jié)尾的屬性的元素。
[attr*=value]
表示帶有以 attr 命名的，且值包含有"value"的屬性的元素。
[attr operator value i]
在帶有屬性值的屬性選型選擇器表達(dá)式的右括號(hào)（]括號(hào)）前添加用空格間隔開的字母i（或I）可以忽略屬性值的大小寫（ASCII字符范圍內(nèi)的字母），后面加個(gè)i、I來(lái)標(biāo)識(shí)不區(qū)分大小寫，

結(jié)合選擇器

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

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

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

后代選擇器 div p 【空格即可，所少個(gè)空格無(wú)關(guān)】

自身選擇器 div.test 【有class為test的div元素】

偽類選擇器

偽類選擇器可以看成是和類選擇器類似的形式，只不過類class是使用.來(lái)表示，而偽類使用:來(lái)表示

:active  [當(dāng)用鼠標(biāo)交互時(shí)，它代表的是用戶按下按鍵和松開按鍵之間的時(shí)間。 :active 偽類通常用來(lái)匹配tab鍵交互]
:any  [.a > :-moz-any(.b, .c) === .a .b,.a .c 這樣的書寫方便相同樣式的元素的組合，試驗(yàn)階段，少用為好]
:any-link [所有的超鏈接]
:checked  [一些選擇表單元素被選擇了，可以用于實(shí)現(xiàn)點(diǎn)擊某些CheckBox來(lái)線上更多的模塊]
:default []
:dir()  [文字書寫方向 :dir(rtl) 文字從右到左  和屬性選擇器不同，
    [dir=rtl] 或 [dir=ltr]不會(huì)匹配到dir屬性的值為auto的元素。
    而 :dir()會(huì)匹配經(jīng)過客戶端計(jì)算后的屬性, 不管是繼承的dir值還是dir值為auto的]
:disabled [被禁用的元素]
:empty  [沒有子元素的元素。 這里說的子元素，只計(jì)算元素結(jié)點(diǎn)及文本（包括空格），注釋、運(yùn)行指令不考慮在內(nèi)。]
:enabled [和disabled相反]
:first [@page :first 和打印配合，改變打印時(shí)的一些屬性]
:first-child [element:first-child 第一個(gè)子元素]
:first-of-type [偽類匹配子元素中新的種類的元素（第一次出現(xiàn)元素類型就是新的）]
:fullscreen [實(shí)驗(yàn)性，全屏的時(shí)候匹配的某些元素的樣式]
:focus [在一個(gè)元素成為焦點(diǎn)時(shí)生效，用戶可以通過鍵盤或鼠標(biāo)激活焦點(diǎn)]
:focus-within []
:hover [適用于用戶使用指示設(shè)備虛指一個(gè)元素（沒有激活它）的情況，大部分是指鼠標(biāo)懸停]
:indeterminate [一下三種情況，
    indeterminate 屬性被 JavaScript 置為 true 的  元素 
    所有 radio 按鈕都未被選中的  元素
    處于 indeterminate 狀態(tài)的  元素]
:in-range [input框的輸入內(nèi)容在max min等限制的范圍內(nèi)時(shí)候會(huì)匹配上]
:invalid [表示任何  或 
 元素的內(nèi)容無(wú)法通過輸入的類型設(shè)置的驗(yàn)證]
:lang  [element:lang(language-code) { style properties }主要是元素使用的語(yǔ)言]
:last-child [最后一個(gè)孩子元素]
:last-of-type [最后出現(xiàn)的類型]
:left [@page :left 配合打印來(lái)設(shè)置]
:link [鏈接]
:not() [:not(selector) 在選擇器上增加一層過濾的功能]
:nth-child []
    :nth-child(  [ of # ]? )
    where 
     =  | even | odd
    允許對(duì)子元素做一些算法操作，用以匹配某些想要匹配的節(jié)點(diǎn)
:nth-last-child [和上面的一樣，只是順序是從后往前數(shù)]
:nth-last-of-type [和上面一樣，只是不是統(tǒng)計(jì)子元素，而是子元素的類型為一種匹配，來(lái)匹配span的odd或者div類型的odd]
:nth-of-type []
:only-child []
:only-of-type []
:optional [表示任意沒有required屬性的  或