小程序模板網(wǎng)

微信小程序之樣式選擇器

發(fā)布時(shí)間:2021-07-07 08:59 所屬欄目:小程序開(kāi)發(fā)教程

一.基本選擇器

  類(lèi)選擇器 .name{}

  ID選擇器 #name{}

  元素選擇器 name{}

  通配符選擇器(編譯不通過(guò)) *{}

  包含選擇器 p c{}:parent下所有的同一名字的child

  子元素選擇器 p>c{}:parent下一層所有的同一名字的child

  鄰近兄弟元素選擇器 c1+c2{}:同一層級(jí)中與child1相鄰的child2元素

  通用兄弟元素選擇器 c1~c2{}:同一層級(jí)中,child1下一個(gè)(可不相鄰)child2元素

  二.屬性選擇器

  E[attr]:包含attr屬性的元素

  E[attr="value"]:屬性值只等于“value"的元素

  E[attr~="value"]:有的元素屬性有很多個(gè)屬性值,該樣式表示屬性值中只要有一個(gè)是“value"的元素

  E[attr|="value"]:屬性值以“value-"開(kāi)頭的元素

  E[attr^="value"]:屬性值以“value"開(kāi)頭的元素

  E[attr$="value"]:屬性值以“value"結(jié)尾的元素

  E[attr*="value"]:屬性值字符串中包含“value"的元素

  偽類(lèi)選擇器

  動(dòng)態(tài)偽類(lèi)選擇器(:link :visited :hover :active :focus)

  :link:鏈接沒(méi)有被訪問(wèn)時(shí)的效果(微信小程序不支持)

  :hover:鼠標(biāo)經(jīng)過(guò)的效果(微信小程序不支持)

  :visited:鏈接被訪問(wèn)后的效果(微信小程序不支持)

  :active:鼠標(biāo)點(diǎn)下去的效果(正發(fā)生在點(diǎn)的那一下)

  :focus:獲得焦點(diǎn)后的效果

  狀態(tài)偽類(lèi)選擇器(:enabeld :disabled :checked)

  選擇偽類(lèi)選擇器(:first-child :last-child :nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type() :first-of-type :last-of-type :only-child :only-of-type)

  :first-child:選擇某個(gè)元素的第一個(gè)子元素(更確切的說(shuō)為:選擇第一個(gè)使用該屬性的元素)

  :last-child:選擇某個(gè)元素的最后一個(gè)子元素(更確切的說(shuō)為:選擇最后一個(gè)使用該屬性的元素)

  :nth-child():選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素(參數(shù)從1開(kāi)始)

  :nth-last-child():選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素,從這個(gè)元素的最后一個(gè)子元素開(kāi)始算

  :nth-of-type():選擇指定的元素(參數(shù)從1開(kāi)始)

  :nth-last-of-type():選擇指定的元素,從元素的最后一個(gè)開(kāi)始計(jì)算

  :first-of-type:選擇一個(gè)上級(jí)元素的第一個(gè)同類(lèi)子元素

  :last-of-type:選擇一個(gè)上級(jí)元素的最后一個(gè)同類(lèi)子元素

  :only-child:選擇的元素是它的父元素的唯一一個(gè)子元素

  :only-of-type:選擇一個(gè)元素是它的上級(jí)元素的唯一一個(gè)相同類(lèi)型的子元素

  空內(nèi)容偽類(lèi)選擇器(:empty):選擇的元素里面沒(méi)有任何內(nèi)容

  否定偽類(lèi)選擇器(:not):不匹配該屬性的每個(gè)元素(微信小程序不支持)

  偽元素(::first-line ::first-letter ::before ::after ::selection)

  ::first-line:第一行

  ::first-letter:第一個(gè)字母

  ::selection:文本被選擇(如復(fù)制時(shí))后的效果,CSS只能修改background與color兩個(gè)屬性,微信小程序不支持


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/27059.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún):800182392 點(diǎn)擊咨詢(xún)
QQ在線咨詢(xún)