摘要:通用選擇器組合子和否定偽類對特異性沒有影響。選擇器大部分還是和選擇器保持了一致,但是有以下一些部分的改動第一個元素最后一個元素所有偶數(shù)元素,索引值從開始,第一個元素是偶數(shù),第二個元素是奇數(shù),以此類推。
選擇器
在書寫樣式和查找節(jié)點(diǎn)的時(shí)候,選擇器是必不可少的,所以了解選擇器的書寫方式和使用就顯得極為重要,本文主要分開講了css選擇器和jQuery選擇器;
css選擇器大家都可能知道,在瀏覽器渲染的時(shí)候會構(gòu)建dom、cssom然后render,這里盜圖兩張:
看看就好了,本文還是講css和dom的關(guān)聯(lián)過程,書寫css的格式均是:
body .test{ //選擇器 color:red; //樣式名和值 }
看到就很熟悉,這里需要提醒大家,雖然書寫是從左至右,但是css的遍歷方式且是從右到左的方式,原因是從右至左的遍歷方式存在效率問題,因?yàn)橐话銓懺谧筮叺氖歉讣壴亍⒑筮吀釉兀绻麖淖蟮接业牟檎遥蜁闅v父級元素下的所有子元素,相反,如果從右至左的話,只需要找到子元素然后一級級的往上查找即可;
對于css的書寫規(guī)范可以參考:https://github.com/doyoe/html... 里面寫的還是很全的,現(xiàn)在開始講解選擇器問題,
元素選擇器
類選擇器
id選擇器
通配符選擇器 * 【應(yīng)該盡量少用】
屬性選擇器
這其中屬性選擇器的方式較為多樣,具體如下【大部分規(guī)則和正則有點(diǎn)類似】:
[attr]
表示帶有以 attr 命名的屬性的元素。
[attr=value]
表示帶有以 attr 命名的,且值為"value"的屬性的元素。
[attr~=value]
表示帶有以 attr 命名的屬性的元素,并且該屬性是一個以空格作為分隔的值列表,其中至少一個值為"value"。
[attr|=value]
表示帶有以 attr 命名的屬性的元素,屬性值為“value”或是以“value-”為前綴("-"為連字符,Unicode編碼為U+002D)開頭。典型的應(yīng)用場景是用來來匹配語言簡寫代碼(如zh-CN,zh-TW可以用zh作為value)。
[attr^=value]
表示帶有以 attr 命名的,且值是以"value"開頭的屬性的元素。
[attr$=value]
表示帶有以 attr 命名的,且值是以"value"結(jié)尾的屬性的元素。
[attr*=value]
表示帶有以 attr 命名的,且值包含有"value"的屬性的元素。
[attr operator value i]
在帶有屬性值的屬性選型選擇器表達(dá)式的右括號(]括號)前添加用空格間隔開的字母i(或I)可以忽略屬性值的大小寫(ASCII字符范圍內(nèi)的字母),后面加個i、I來標(biāo)識不區(qū)分大小寫,
相鄰兄弟選擇器 div + p 【表示p元素為選擇項(xiàng),但是他的前方緊鄰的兄弟必須是div】
通用相鄰元素 div ~ p 【表示p元素為選擇項(xiàng),但是他的前方必須有div兄弟元素,可以不緊鄰】
子選擇器 div > p 【表示p元素的直接父級元素必須是div才會匹配】
后代選擇器 div p 【空格即可,所少個空格無關(guān)】
自身選擇器 div.test 【有class為test的div元素】
偽類選擇器偽類選擇器可以看成是和類選擇器類似的形式,只不過類class是使用.來表示,而偽類使用:來表示
:active [當(dāng)用鼠標(biāo)交互時(shí),它代表的是用戶按下按鍵和松開按鍵之間的時(shí)間。 :active 偽類通常用來匹配tab鍵交互] :any [.a > :-moz-any(.b, .c) === .a .b,.a .c 這樣的書寫方便相同樣式的元素的組合,試驗(yàn)階段,少用為好] :any-link [所有的超鏈接] :checked [一些選擇表單元素被選擇了,可以用于實(shí)現(xiàn)點(diǎn)擊某些CheckBox來線上更多的模塊] :default [] :dir() [文字書寫方向 :dir(rtl) 文字從右到左 和屬性選擇器不同, [dir=rtl] 或 [dir=ltr]不會匹配到dir屬性的值為auto的元素。 而 :dir()會匹配經(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 第一個子元素] :first-of-type [偽類匹配子元素中新的種類的元素(第一次出現(xiàn)元素類型就是新的)] :fullscreen [實(shí)驗(yàn)性,全屏的時(shí)候匹配的某些元素的樣式] :focus [在一個元素成為焦點(diǎn)時(shí)生效,用戶可以通過鍵盤或鼠標(biāo)激活焦點(diǎn)] :focus-within [] :hover [適用于用戶使用指示設(shè)備虛指一個元素(沒有激活它)的情況,大部分是指鼠標(biāo)懸停] :indeterminate [一下三種情況, indeterminate 屬性被 JavaScript 置為 true 的 元素 所有 radio 按鈕都未被選中的 元素 處于 indeterminate 狀態(tài)的
注意鏈接的匹配:需要遵循LVHA的先后順序,即::link — :visited — :hover — :active。
偽元素選擇器偽元素可以看做元素一樣處理,大部分都還沒標(biāo)準(zhǔn)化,用的較多的也就是::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
需要注意的是:由于選擇器的權(quán)重問題,所以當(dāng)多個選擇器命中同一個元素時(shí),需要根據(jù)權(quán)重確定元素的具體樣式【由情到重,不能越級進(jìn)位】:
類型選擇器(type selectors)(例如, h1)和 偽元素(pseudo-elements)(例如, ::before)
類選擇器(class selectors) (例如,.example),屬性選擇器(attributes selectors)(例如, [type="radio"]),偽類(pseudo-classes)(例如, :hover)
ID選擇器(例如, #example)
給元素添加的內(nèi)聯(lián)樣式 (例如, style="font-weight:bold") 總會覆蓋外部樣式表的任何樣式 ,因此可看作是具有最高的優(yōu)先級。.
!important 規(guī)則例外
當(dāng)在一個樣式聲明中使用一個!important 規(guī)則時(shí),此聲明將覆蓋任何其他聲明。雖然技術(shù)上很重要與特異性無關(guān),但它與它直接相關(guān)。
通用選擇器(universal selector)(*), 組合子(combinators) (+, >, ~, " ") 和 否定偽類(negation pseudo-class)(:not()) 對特異性沒有影響。(但是,在 :not() 內(nèi)部聲明的選擇器是會影響優(yōu)先級,:not 否定偽類在優(yōu)先級計(jì)算中不會被看作是偽類. 事實(shí)上, 在計(jì)算選擇器數(shù)量時(shí)還是會把其中的選擇器當(dāng)做普通選擇器進(jìn)行計(jì)數(shù).)。
jQuery選擇器大部分還是和css選擇器保持了一致,但是有以下一些部分的改動:
:first $("p:first") 第一個元素 :last $("p:last") 最后一個
元素 :even $("tr:even") 所有偶數(shù)
元素,索引值從 0 開始,第一個元素是偶數(shù) (0),第二個元素是奇數(shù) (1),以此類推。 :odd $("tr:odd") 所有奇數(shù) 元素,索引值從 0 開始,第一個元素是偶數(shù) (0),第二個元素是奇數(shù) (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") 所有標(biāo)題元素 ,
... :animated $(":animated") 所有動畫元素 :contains(text) $(":contains("Hello")") 所有包含文本 "Hello" 的元素 :has(selector) $("div:has(p)") 所有包含有
元素在其內(nèi)的
元素 :hidden $("p:hidden") 所有隱藏的元素 :visible $("table:visible") 所有可見的表格 [attribute$=value] $("[href$=".jpg"]") 所有帶有 href 屬性且值以 ".jpg" 結(jié)尾的元素 :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 元素
大部分還是在原有的上面做了一些添加。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/112421.html
相關(guān)文章
[譯] Jquery中 .bind() .live() .delegate() 和 .on() 之間
摘要:方法將事件類型和一個事件處理函數(shù)直接注冊到了被選中的元素中。方法將與事件處理函數(shù)關(guān)聯(lián)的選擇器和事件信息一起附加到文檔的根級元素即。通過將事件信息注冊到上,這個事件處理函數(shù)將允許所有冒泡到的事件調(diào)用它例如委托型傳播型事件。 簡介 我了解到很多網(wǎng)頁開發(fā)者對jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑。這些疑惑通常是關(guān)于它們之間...
jQuery筆記總結(jié)篇
摘要:希望在做所有事情之前,操作文檔。不受層級限制子選擇器在給定的父元素下匹配所有子元素。相鄰選擇器匹配所有緊接在元素后的元素。判斷當(dāng)前對象中的某個元素是否包含指定類名,包含返回,不包含返回下標(biāo)過濾器精確選出指定下標(biāo)元素獲取第個元素。 原文鏈接 http://blog.poetries.top/2016... 首先,來了解一下jQuery學(xué)習(xí)的整體思路 showImg(https://seg...
jQuery 對象、基本選擇器、篩選選擇器
摘要:代表的上下文對象是一個的上下文對象,可以調(diào)用的方法和屬性值特殊選擇器點(diǎn)擊測試通過原生處理點(diǎn)擊測試通過原生處理直接通過的方法改變顏色通過包裝成對象改變顏色 DOM對象轉(zhuǎn)化成jQuery對象 如果傳遞給$(DOM)函數(shù)的參數(shù)是一個DOM對象,jQuery方法會把這個DOM對象給包裝成一個新的jQuery對象 元素一 元素二 元素三 var ...
jQuery學(xué)習(xí)和知識點(diǎn)總結(jié)歸納
摘要:目前在前端開發(fā)所占的比重越來越高,在我們學(xué)習(xí)和開發(fā)的過程中都會去使用。下面把程序員雷雪松對的知識點(diǎn)總結(jié)和歸納分享給大家。過濾對同胞元素的搜索。將匹配元素集合縮減為集合中的最后一個元素。返回指定元素相對于其他指定元素的位置。 jQuery目前在Web前端開發(fā)所占的比重越來越高,在我們jQuery學(xué)習(xí)和開發(fā)的過程中都會去使用。jQuery幫我們解決了瀏覽器之間JS一些不兼容的地方和簡化了原...
jquery最佳實(shí)踐筆記
摘要:對比內(nèi)部使用引擎,處理各種選擇器。引擎的選擇順序是從右到左,所以這條語句是先選,然后再一個個過濾出父元素,這導(dǎo)致它比最快的形式大約慢。這條語句與上一條是同樣的情況。 使用最新版本 因?yàn)樾掳姹緯倪M(jìn)性能,還有很多新功能 用對選擇器 最快的選擇器:id選擇器和元素標(biāo)簽選擇器原因:遇到這些選擇器的時(shí)候,jQuery內(nèi)部會自動調(diào)用瀏覽器的原生方法(比如getElementById()),所以...
發(fā)表評論
0條評論
niuxiaowei111
男|高級講師
TA的文章
閱讀更多
Go語言核心36講(Go語言實(shí)戰(zhàn)與應(yīng)用八)--學(xué)習(xí)筆記
閱讀 2181·2021-11-19 09:55
我用Python爬取了女神視界,爬蟲之路永無止境「內(nèi)附源碼」
閱讀 2637·2021-11-11 16:55
Python表白代碼:太秀了,用過的人都找到了對象...【滿屏玫瑰盛開!】
閱讀 3175·2021-09-28 09:36
虛擬主機(jī)能承受多少ip-虛擬主機(jī)有什么優(yōu)勢嗎?
閱讀 1945·2021-09-22 16:05
【譯】Vertical-Align: All You Need To Know
閱讀 3269·2019-08-30 15:53
上下高度固定(100px),中間自適應(yīng)
閱讀 1805·2019-08-30 15:44
css選擇器和jQuery選擇器
閱讀 2899·2019-08-29 13:10
? Emoji ? - 收藏集 - 掘金
閱讀 1339·2019-08-29 12:30
閱讀需要支付1元查看