微信小程序之樣式選擇器

一.基本選擇器

  • 類選擇器 .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"結(jié)尾的元素
  • E[attr*="value"]:屬性值字符串中包含“value"的元素

偽類選擇器

動態(tài)偽類選擇器(:link :visited :hover :active :focus)
  • :link:鏈接沒有被訪問時的效果(微信小程序不支持)
  • :hover:鼠標(biāo)經(jīng)過的效果(微信小程序不支持)
  • :visited:鏈接被訪問后的效果(微信小程序不支持)
  • :active:鼠標(biāo)點(diǎn)下去的效果(正發(fā)生在點(diǎn)的那一下)
  • :focus:獲得焦點(diǎn)后的效果
狀態(tài)偽類選擇器(: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():選擇某個元素的一個或多個特定的子元素(參數(shù)從1開始)
  • :nth-last-child():選擇某個元素的一個或多個特定的子元素窄锅,從這個元素的最后一個子元素開始算
  • :nth-of-type():選擇指定的元素(參數(shù)從1開始)
  • :nth-last-of-type():選擇指定的元素缰雇,從元素的最后一個開始計算
  • :first-of-type:選擇一個上級元素的第一個同類子元素
  • :last-of-type:選擇一個上級元素的最后一個同類子元素
  • :only-child:選擇的元素是它的父元素的唯一一個子元素
  • :only-of-type:選擇一個元素是它的上級元素的唯一一個相同類型的子元素
空內(nèi)容偽類選擇器(:empty):選擇的元素里面沒有任何內(nèi)容
否定偽類選擇器(:not):不匹配該屬性的每個元素(微信小程序不支持)
偽元素(::first-line ::first-letter ::before ::after ::selection)
  • ::first-line:第一行
  • ::first-letter:第一個字母
  • ::selection:文本被選擇(如復(fù)制時)后的效果,CSS只能修改background與color兩個屬性盯串,微信小程序不支持

原文:https://blog.csdn.net/weixin_39766005/article/details/82056839

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末体捏,一起剝皮案震驚了整個濱河市糯崎,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌沃呢,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件某抓,死亡現(xiàn)場離奇詭異,居然都是意外死亡汉矿,警方通過查閱死者的電腦和手機(jī)备禀,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來赋续,“玉大人另患,你說我怎么就攤上這事±セ” “怎么了?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵敛熬,是天一觀的道長第股。 經(jīng)常有香客問我,道長诲锹,這世上最難降的妖魔是什么涉馅? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任稚矿,我火速辦了婚禮庸诱,結(jié)果婚禮上晤揣,老公的妹妹穿的比我還像新娘。我一直安慰自己钠四,他們只是感情好跪楞,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布侣灶。 她就那樣靜靜地躺著缕碎,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上煞檩,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天斟湃,我揣著相機(jī)與錄音,去河邊找鬼凝赛。 笑死,一個胖子當(dāng)著我的面吹牛捆昏,可吹牛的內(nèi)容都是我干的毙沾。 我是一名探鬼主播,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼寇仓,長吁一口氣:“原來是場噩夢啊……” “哼烤宙!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起躺枕,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤拐云,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后慨丐,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡备闲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年恬砂,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片泻骤。...
    茶點(diǎn)故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡狱掂,死狀恐怖演痒,靈堂內(nèi)的尸體忽然破棺而出趋惨,到底是詐尸還是另有隱情,我是刑警寧澤讯嫂,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布兆沙,位于F島的核電站,受9級特大地震影響渐裸,放射性物質(zhì)發(fā)生泄漏装悲。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一洞渤、第九天 我趴在偏房一處隱蔽的房頂上張望属瓣。 院中可真熱鬧载迄,春花似錦抡蛙、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽湿酸。三九已至灭美,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間届腐,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工硬萍, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留傀顾,地道東北人襟铭。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像赐劣,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子婉徘,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 其實(shí)平時用得多的選擇器無非也就是那么幾個咐汞,時間久了,許多不常用的選擇器就慢慢忘記了几晤。為了不讓自己忘記這些選擇器植阴,今...
    盛夏晚清風(fēng)閱讀 1,818評論 0 5
  • 1.class 和 id 的使用場景? 類選擇器允許以一種獨(dú)立于文檔元素的方式來指定樣式。該選擇器可以單獨(dú)使用众雷,也...
    草鞋弟閱讀 2,408評論 0 1
  • 一、CSS選擇器常見的有幾種? 基本選擇器 通配選擇器~選擇文檔中所有的html元素株搔,用一個*表示 元素選擇器~選...
    dengpan閱讀 961評論 0 3
  • 1.class 和 id 的使用場景? 兩者都能選取DOM節(jié)點(diǎn)并給DOM節(jié)點(diǎn)添加樣式纯蛾,但是W3C標(biāo)準(zhǔn)里規(guī)定頁面中只...
    饑人谷_米彌輪閱讀 386評論 0 1
  • CSS選擇器常見的有幾種? 基礎(chǔ)選擇器 “*” -> 通用元素選擇器翻诉,匹配頁面任何元素炮姨。很少使用 “#” -> i...
    饑人谷_吳亞敏閱讀 247評論 0 0