学习书籍：从零开始学微信小程序开发 实现计算器功能，原书代码如下： 1、WXSS
/* pages/cal/cal.wxss *//*外层容器*/.content { height:100%; display:flex; flex-direction: column; align-items: center; box-sizing: border-box; padding-top: 10rpx;}/*计算结果*/.screen { background-color: #ffffff; text-align: right; width:650rpx; height:150rpx; line-height: 150rpx; padding: 0 20rpx; margin: 30rpx; border: 1px solid #ddd; border-radius: 3px;}/*按钮组*/.btnGroup { display: flex; flex-direction: row;}/*按钮*/.item { width: 160rpx; min-height: 150rpx; margin:10rpx; text-shadow: 0 1px 1px rgba(0,0,0,0.3); border-radius: 5px; text-align: center; line-height: 150rpx;}/*控制按钮 橙色*/.orange { background-color: #f78d1d; color:#fef4e9; border:solid 1px #da7c0c;}/*数字按钮蓝色*/.blue { background-color: #0095cd; color:#d9eef7; border:solid 1px #0076a3}/*数字按钮按下状态*/.button-hover-num { background-color: #0094cc; opacity:0.7;}/*控制按钮按下状态*/.other-button-hover { background-color: red;} |
2、WXML
<!--pages/cal/cal.wxml--><view class="content"> <view class="screen">计算结果</view> <view class="btnGroup"> <button class="item orange" hover-class="other-button-hover">历史</button> <button class="item orange" hover-class="other-button-hover">C</button> <button class="item orange" hover-class="other-button-hover">-</button> <button class="item orange" hover-class="other-button-hover">÷</button> </view> <view class="btnGroup"> <button class="item blue" hover-class="button-hover-num">7</button> <button class="item blue" hover-class="button-hover-num">8</button> <button class="item blue" hover-class="button-hover-num">9</button> <button class="item orange" hover-class="other-button-hover">×</button> </view> <view class="btnGroup"> <button class="item blue" hover-class="button-hover-num">4</button> <button class="item blue" hover-class="button-hover-num">5</button> <button class="item blue" hover-class="button-hover-num">6</button> <button class="item orange" hover-class="other-button-hover">-</button> </view> <view class="btnGroup"> <button class="item blue" hover-class="button-hover-num">1</button> <button class="item blue" hover-class="button-hover-num">2</button> <button class="item blue" hover-class="button-hover-num">3</button> <button class="item orange" hover-class="other-button-hover">+</button> </view> <view class="btnGroup"> <button class="item orange" hover-class="other-button-hover">±</button> <button class="item blue" hover-class="button-hover-num">0</button> <button class="item orange" hover-class="other-button-hover">.</button> <button class="item orange" hover-class="other-button-hover">=</button> </view></view> |
模拟器显示如下：和书中描述不一致，请问，是开发工具兼容性的问题么？
你也没发书中什么样子，你先了解flex布局
涉及样式选择器的优先级，新版本微信小程序开发工具自带的属性
button的样式：
如果只是写类名.item,它的优先级比不上button:not([size='mini']),就算Wxml那里查看button:not([size='mini'])里面的width:184px被划掉了，但是其实作用的是button:not([size='mini'])里面的width:184px
就感觉默认的样式带上属性有点那个
去掉这一句