微信小程式 css樣式之選擇器

2021-10-06 09:21:48 字數 1753 閱讀 9622

view

.class

#identified

text#identified

view

view 帶 class

view 帶 id

text 帶 id

相鄰兄弟選擇器(+)

介於兩個選擇器之間,當第二個元素緊跟在

第乙個元素之後,並且兩個元素都是屬於同乙個父

元素的子元素,則第二個元素將被選中。

view + text

text + text

這個跟在view下的text是不會變成紅色的,因為它和view不是同乙個父元素的子元素

view

跟在view後,且是同乙個父元素的子元素,顯示為紅色\n

跟在text後,且是同乙個父元素的子元素,顯示為綠色

沒有特殊顏色

跟在view後,且是同乙個父元素的子元素,顯示為紅色

兄弟選擇符(~)

位置無須緊鄰,只須同層級,a~b選擇a元素之後所有同層級b元素。

view ~ text
這個跟在view下的text是不會變成紅色的,因為它和view不是同層級

view

跟在view後,且是同層級,顯示為紅色\n

跟在text後,且是同層級,顯示為綠色

沒有特殊顏色

跟在view後,且是同層級,顯示為紅色

子選擇器(>)當使用 > 選擇符分隔兩個元素時,它只會匹配那些作為第乙個元素的直接後代(子元素)的第二元素. 與之相比, 當兩個元素由 後代選擇器 相連時, 它表示匹配存在的所有由第乙個元素作為祖先元素(但不一定是父元素)的第二個元素, 無論它在 dom 中"跳躍" 多少次.

後代選擇器( )

當使用 ␣ 選擇符 (這裡代表乙個空格,更確切的說是乙個或多個的空白字元) 連線兩個元素時使得該選擇器可以只匹配那些由第乙個元素作為祖先元素的所有第二個元素(後代元素) . 後代選擇器與 子選擇器 很相似, 但是後代選擇器不需要相匹配元素之間要有嚴格的父子關係.

子選擇器(>)後代選擇器( )

view > .class

view  .class

文字1

view

文字2文字3

同級選擇器 微信小程式支援的樣式選擇器實踐與補充

目前支援的選擇器有 選擇器樣例樣例描述.class.intro選擇所有擁有 class intro 的元件 id firstname選擇擁有 id firstname 的元件elementview選擇所有 view 元件element,elementview,checkbox選擇所有文件的 view...

微信小程式 聯動選擇器

從底部彈起的滾動選擇器,現支援五種選擇器,通過mode來區分,分別是普通選擇器,多列選擇器,時間選擇器,日期選擇器,省市區選擇器,預設是普通選擇器。先來看看效果圖 普通選擇器 view picker bindchange bindpickerchang value range view class ...

微信小程式滑動選擇器

在wxml檔案中,用乙個picker標籤代表選擇器,bindchange是使用者點選確定後觸發的函式,index是picker自帶的引數,使用者點選確定後,bindchange繫結的函式用.detail.value就可以訪問到。第乙個選擇的index值為0,依次遞增。range要在page的data...