微信小程序之樣式選擇器

  一.基本選擇器

  類選擇器 .name{}

  ID選擇器 #name{}

  元素選擇器 name{}

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

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

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

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

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

  二.屬性選擇器

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

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

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

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

  E[attr^="value"]:屬性值以“value"開頭的元素

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

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

  僞類選擇器

  動态僞類選擇器(:link :visited :hover :active :focus)

  :link:鍊接沒有被訪問時的效果(微信小程序不支持)

  :hover:鼠标經過的效果(微信小程序不支持)

  :visited:鍊接被訪問後的效果(微信小程序不支持)

  :active:鼠标點下去的效果(正發生在點的那一下)

  :focus:獲得焦點後的效果

  狀态僞類選擇器(:enabeld :disabled :checked)

  選擇僞類選擇器(: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:選擇某個元素的第一個子元素(更确切的說為:選擇第一個使用該屬性的元素)

  :last-child:選擇某個元素的最後一個子元素(更确切的說為:選擇最後一個使用該屬性的元素)

  :nth-child():選擇某個元素的一個或多個特定的子元素(參數從1開始)

  :nth-last-child():選擇某個元素的一個或多個特定的子元素,從這個元素的最後一個子元素開始算

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

  :nth-last-of-type():選擇指定的元素,從元素的最後一個開始計算

  :first-of-type:選擇一個上級元素的第一個同類子元素

  :last-of-type:選擇一個上級元素的最後一個同類子元素

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

  :only-of-type:選擇一個元素是它的上級元素的唯一一個相同類型的子元素

  空内容僞類選擇器(:empty):選擇的元素裡面沒有任何内容

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

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

  ::first-line:第一行

  ::first-letter:第一個字母

  ::selection:文本被選擇(如複制時)後的效果,CSS隻能修改background與color兩個屬性,微信小程序不支持

猜你喜歡