超實用的選擇符表達式(基於jQuery)


簡單的CSS選擇符


*                       所有元素

#id                    帶有給定ID的元素

element            給定類型的所有元素

.class               帶有給定類的所有元素

a, b                  與a或b匹配的元素

a b                   作為a后代b匹配的元素

a > b                作為a子元素的b匹配的元素

a + b                作為a后面直接同輩元素的b匹配的元素

a ~ b                作為a后面同輩的b匹配的元素

 

在同輩元素間定位


:nth-child(index)                作為其父元素第index個子元素的元素(從1開始計數)

:nth-child(even)                 作為其父元素第偶數個子元素的元素(從1開始計數)

:nth-child(odd)                   作為其父元素第奇數個子元素的元素(從1開始計數)

:nth-child(formula)             作為其父元素第n個子元素的元素(從1開始計數)。formula(公式)的格式為an + b,a、b為整數  (這個我也不大懂,了解的朋友希望評論告訴我一下,謝謝)

:nth-last-child()                  與:nth-child()相同,只不過是從最后一個元素開始倒計數

:first-child                          作為其父元素第一個子元素的元素

:last-child                          作為其父元素最后一個子元素的元素

:only-child                         作為其父元素唯一一個子元素的元素

:nth-of-type()                    與:nth-child()相同,只不過只計相同元素

 

在匹配的元素間定位

 


 

:first                                 結果集中的第一個元素

:last                                 結果集中的最后一個元素

:not(a)                             結果集中與a不匹配的所有元素

:even                               結果集中的偶數元素(從0開始計數)

:odd                                結果集中的奇數元素(從0開始計數)

:eq(index)                       結果集中索引為index的元素(從0開始計數)

:gt(index)                        結果集中所有位於給定索引之后(大於該索引)的元素(從0開始計數)

:lt(index)                         結果集中所有位於給定索引之后(小於該索引)的元素(從0開始計數

 

表單


:input                             所有<input>、 <select>、<textarea>和<button>元素

:text                               type = 'text'的<input>元素

:password                      type = 'password'的<input>元素

:file                                 type = 'file'的<input>元素

:radio                              type = 'radio'的<input>元素

:checkbox                      type = 'checkbox'的<input>元素

:submit                           type = 'submit'的<input>元素

:image                           type = 'image'的<input>元素

:reset                             type = 'reset'的<input>元素

:button                           type = 'button'的<input>元素及<button>元素

:enabled                        啟用的表單元素

:disabled                       禁用的表單元素

:checked                       選中的復選框和單選按鈕元素

: selected                      選中的<option>元素

 

其他自定義選擇符


 

:root                              文檔的根元素

:header                         標題元素(如<h1>、<h2>)

:animate                        其動畫正在播放的元素

:contains(text)               包含給定文本text的元素

:empty                           不包含子節點的元素

:has(a)                           后代元素中至少有一個與a匹配的元素

:parent                           包含子節點的元素

:hidden                          隱藏的元素,包括通過css隱藏的元素及<input type = 'hidden' />

:visible                           與:hidden匹配的元素相反

:focus                            獲得鍵盤焦點的元素

:lang(language)             具有給定(在元素的lang屬性或<meta>標簽中聲明的)語言代碼的元素

:target                            URI標識符指向的目標元素

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM