收藏
回答

WXSS样式表问题?

学习书籍:从零开始学微信小程序开发 实现计算器功能,原书代码如下: 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>

模拟器显示如下:和书中描述不一致,请问,是开发工具兼容性的问题么?

最后一次编辑于  11-15
回答关注问题邀请回答
收藏

3 个回答

  • 爆竹声中一岁除
    爆竹声中一岁除
    11-15

    你也没发书中什么样子,你先了解flex布局

    11-15
    赞同 2
    回复
  • 轩炀
    轩炀
    11-21

    涉及样式选择器的优先级,新版本微信小程序开发工具自带的属性

    button的样式:


    如果只是写类名.item,它的优先级比不上button:not([size='mini']),就算Wxml那里查看button:not([size='mini'])里面的width:184px被划掉了,但是其实作用的是button:not([size='mini'])里面的width:184px


    就感觉默认的样式带上属性有点那个

    11-21
    赞同 1
    回复 1
    • 老田
      老田
      星期一 12:13
      谢谢。最近忙于Visual C++的一个项目,没来得及看。你的回复是有道理的,但我还是觉得作为一个开发工具,这些基本的兼容性问题不应该存在。
      星期一 12:13
      回复
  • Once Was
    Once Was
    11-15


    去掉这一句

    11-15
    赞同
    回复 1
问题标签