? ? ? ? 微信文檔上的button有個hover-class屬性慨丐，是指定按鈕?按下去?的樣式類挥下，意味著可以設(shè)置按鈕點擊后的背景色哪亿，但是文檔上說的很模糊，也很簡單菱魔，其實里面還是有玄機的留荔，先來看看下面的例子：
/// index.wxml
<view?class='myView'>
? ? <button?class='myButton'?hover-class='button-hover'>點擊變色</button>
</view>
/// index.wxss
.myButton?{
? ? width:?100%;
? ? height:?90rpx;
? ? background-color:?yellow;
}
.button-hover?{
? ? background-color:?red;
}
? ? ? ? 很簡單的樣式，點擊按鈕豌习，改變按鈕的背景色存谎，上面已經(jīng)演示了是沒問題的，那么再來看看下面的:
/// index.wxss
.myView?.myButton?{
? ? width:?100%;
? ? height:?90rpx;
? ? background-color:?yellow;
}
.button-hover?{
? ? background-color:?red;
}
? ? ? ? 對比上面wxss肥隆，我只加了一個 ?.myView?(加大字體的那個)既荚，.myView?.myButton?等價于?.myButton，都是指那個按鈕栋艳，為何這樣寫恰聘，點擊下去按鈕不會變紅色呢，原因在于微信文檔里面沒提到的權(quán)值問題吸占，下圖是網(wǎng)上一張權(quán)值計算圖：
? ? ? ? 內(nèi)聯(lián)樣式晴叨，權(quán)值1000；ID選擇器矾屯，權(quán)值100兼蕊；?類、偽類件蚕、屬性選擇器孙技，權(quán)值10产禾；?類型選擇器、偽元素選擇器牵啦，權(quán)值1 亚情。
? ? ? ? 在權(quán)值比較中，有種情況是都選中相同組件哈雏，那么樣式是由權(quán)值大的層疊權(quán)值小的楞件。
? ? ? ? .myView.myButton 標(biāo)簽選中那個按鈕，.button-hover標(biāo)簽也選中了那個按鈕裳瘪，兩者都選中了相同組件土浸，權(quán)值大的層疊權(quán)值小，.myView.myButton 的權(quán)值為20(10+10)盹愚，.button-hover 的權(quán)值為10栅迄，所以.myView.myButton 里的背景色yellow，層疊了 .button-hover的背景色red皆怕，所以不會變?yōu)榧t色毅舆。
/// index.wxss
.myView?.myButton?{
? ? width:?100%;
? ? height:?90rpx;
? ? background-color:?yellow;
}
.myView .button-hover?{
? ? background-color:?red;
}
? ? ? ? 如果在.button-hover 前面加上 .myView，那么按鈕點擊下去愈腾，因為權(quán)值相同憋活，所以只看代碼順序,紅色背景的代碼在黃色背景的代碼下方，所以紅色會覆蓋黃色虱黄，按鈕點擊就會變色悦即。
? ? ? ? 要如何避免按鈕點擊樣式由于權(quán)值問題而被不知不覺間覆蓋，我總結(jié)了以下：
? ? ? ? ? ? 1橱乱、通用點擊色辜梳，代碼放到所有代碼最后面
? ? ? ? ? ? 2、如果想直接.button-hover就控制點擊色生效泳叠，按鈕就不要太復(fù)雜作瞄，直接 .類名，這樣可以避免權(quán)值問題
? ? ? ? ? ? 3危纫、按鈕寫的太復(fù)雜宗挥，要計算好權(quán)值，點擊色才不會被覆蓋
? ? ? ? 最后再解釋下為何會點擊下去才變色种蝶，不知道各位有沒有發(fā)覺契耿，按鈕點擊下去后，多了一個名為button-hover的類名螃征，這是動態(tài)修改的搪桂，按鈕取消點擊后，又會被自動取消掉盯滚，可以看看下面：
