類選擇器遍歷賦值 css偽類選擇器應該怎樣用(下)

2021-10-16 07:47:35 字數 3705 閱讀 6172

接上兩篇:

css偽類選擇器應該怎樣用(上)

css偽類選擇器應該怎樣用(中)

:enabled用於匹配每個啟用的元素,主要用於表單元素。

:disabled 用於匹配每個禁用的元素,主要用於表單元素。

暱稱:

手機:

性別:

當input預設是enabled屬性,所以設定會顯示黑色背景的輸入框,當被禁用是disabled屬性,顯示的就是下方紫色背景。

:out-of-range 匹配元素的值在指定區間之外時顯示的樣式。

:in-range 匹配元素的值在指定區間時顯示的樣式。

注意:這倆選擇器只作用於能指定區間值的元素,例如 input 元素中的 min 和 max 屬性。如下:

輸入1-5之間的數字:
:valid匹配合法元素,同樣適用於表單。:invalid匹配非法元素,同樣適用於表單。

輸入1-5之間的數字:
與上個案例是不是相同,但它還可以驗證郵箱等字段。

明顯第二是非法的,會顯示紅色背景。

:read-write用於匹配可讀及可寫的元素,即未設定 readonly 屬性的元素。:read-only用於匹配唯讀元素。

適用input和textarea。

:optional 匹配可選的輸入元素,在表單元素是可選項時設定指定的樣式,即未設定 required 屬性的表單元素。:required用於匹配設定了 required 屬性的元素,在表單元素是必填項時設定指定樣式。

只適用於表單元素:input、select 和 textarea。

至此所有偽類/元素選擇器已經寫完,為了方便記憶,我將所有偽類選擇器分為三類,若無印象可在文章中檢視用法。:empty :first-of-type :last-child :last-of-type :not(selector) :nth-child(n) :nth-last-child(n) :nth-last-of-type(n) :nth-of-type(n) :only-of-type :only-child :root :first-letter :first-line :first-child :before :after :lang(language)

:link :visited :active :hover (活動id :target)

checked disabled enabled :in-range :invalid :optional :out-of-range :read-only :read-write :required :valid :focus

css選擇器有哪些?哪些屬性可以繼承?

css選擇符:id選擇器、類選擇器、標籤選擇器、相鄰選擇器、子選擇器、後代選擇器、萬用字元選擇器、屬性選擇器、偽類選擇器

可繼承的屬性:font-size, font-family, color

不可繼承的樣式:border, padding, margin, width, height

優先順序(就近原則):!important > [ id > class > tag ]

!important 比內聯優先順序高

css優先順序演算法如何計算?

元素選擇符: 1

class選擇符: 10

id選擇符:100

元素標籤:1000

!important宣告的樣式優先順序最高,如果衝突再進行計算。

如果優先順序相同,則選擇最後出現的樣式。

繼承得到的樣式的優先順序最低。

瀏覽器是怎樣解析css選擇器的?

css選擇器的解析是從右向左解析的。若從左向右的匹配,發現不符合規則,需要進行回溯,會損失很多效能。若從右向左匹配,先找到所有的最右節點,對於每乙個節點,向上尋找其父節點直到找到根元素或滿足條件的匹配規則,則結束這個分支的遍歷。兩種匹配規則的效能差別很大,是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點(葉子節點),而從左向右的匹配規則的效能都浪費在了失敗的查詢上面。而在 css 解析完畢後,需要將解析的結果與 dom tree 的內容一起進行分析建立一棵 render tree,最終用來進行繪圖。在建立 render tree 時(webkit 中的「attachment」過程),瀏覽器就要為每個 dom tree 中的元素根據 css 的解析結果(style rules)來確定生成怎樣的 render tree。

css3新增偽類及用法?p:first-of-type選擇屬於其父元素的首個

元素的每個

元素。p:last-of-type選擇屬於其父元素的最後

元素的每個

元素。p:only-of-type選擇屬於其父元素唯一的

元素的每個

元素。p:only-child選擇屬於其父元素唯一的子元素的每個

元素。p:nth-child(n)選擇屬於其父元素的第n個子元素的每個

元素。p:nth-last-child(n)選擇屬於其父元素的倒數第n個子元素的每個

元素。p:nth-of-type(n)選擇屬於其父元素第n個

元素的每個

元素。p:nth-last-of-type(n) 選擇屬於其父元素倒數第n個

元素的每個

元素。p:last-child選擇屬於其父元素最後乙個子元素的每個

元素。p:empty選擇沒有子元素的每個

元素(包括文字節點)。

p:target 選擇當前活動的

元素。:not(p)選擇非

元素的每個元素。

:enabled控制表單控制項的可用狀態。

:disabled 控制表單控制項的禁用狀態。

:checked 單選框或核取方塊被選中。

CSS偽類選擇器

原來學習過css偽類選擇器,前幾天寫css發現自己並不熟悉了。這兩天把它撿起來複習一下 css偽類選擇器是用於向某些元素新增特定的效果。錨偽類 包括四種狀態,活動狀態,未被訪問狀態,已被訪問狀態,懸停效果。example a link a visited a hover a active fist ...

css偽類選擇器

link 設定超連結的預設樣式 例如 a a link 不推薦使用 有相容性 one link 不推薦使用 有相容性 visited 設定標籤被訪問過後的樣式 例如 a visited 注意 該偽類選擇器一般不會大量使用,因為瀏覽器存在快取問題。只能設定與顏色相關的屬性 hover 設定滑鼠懸停到標...

css偽類選擇器

名稱 說明ele not 匹配除了誰。裡面填條件,也就是選擇器。ele root 匹配根目錄的意思,在html裡是選 html標籤 ele target url錨點 指向文件內某個具體的元素。那麼該元素就會觸發 target ele first child 匹配父元素下的第乙個子元素必須有父元素,最...