偽類選擇器:

根據(jù)元素的位置或狀態(tài)來匹配相關(guān)元素,相比標(biāo)簽/屬性/上下方選擇器相比,其最大的優(yōu)勢是,不用在原始的html文件上做額外操作.

結(jié)構(gòu)偽類:依據(jù)元素的位置來選擇

核心結(jié)構(gòu)是:nth-child(an + b)
an+b里,需要設(shè)置好a和b兩個值,n是一個從1到大的變量,an+b計(jì)算出來的值就是選中的第幾個元素的值,如3n+2,則n=1,值為5,n=2里,值為8,則代表著選擇的是子元素中的第5,8,11等連續(xù)項(xiàng)

在其基礎(chǔ)上,語法糖對第一個,最后一個,偶數(shù)項(xiàng),奇數(shù)項(xiàng),做了分別

• :firsh-child 第一個元素
• :last-child 最后一個元素
• :nth-child(even) 偶數(shù)元素
• :nth-child(odd) 奇數(shù)元素

同時,如果倒著取,則用nth-last-child(an + b)結(jié)構(gòu)就好

狀態(tài)偽類:根據(jù)當(dāng)前偽類的元素狀態(tài)來設(shè)置

主要用在鼠標(biāo)或鍵盤事件處理響應(yīng)上,即所見即所操作,主要用在鏈接和表單上.包括以下幾項(xiàng):看字面意思就好
:focus
:hover
:checked
:required
:enabled
:diaabled
:not():排除一些項(xiàng)目
:enpty()

.login input[type=”checkbox”]:checked +label{
color: blue;
}

這個代碼的意思是,選擇class為login的后代(空格為后代,>為子代)中type=”checkbox”的input在checked狀態(tài)時,選擇它的兄弟元素label標(biāo)簽中的內(nèi)容,讓它顯示為紅色