-BEM命名规范
-CSS命名模板
```css
page
page_hd
page_bd
<div class="page">
<div class="page__hd">
<h1 class="page__title">Button</h1>
<p class="page__desc">按钮</p>
</div> <!--头部-->
<div class="page__bd">
<a href="#" class="weui-btn weui-btn_primary">页面主操作</a> <!--weui 库名 不是结构 是组件-->
<a href="#" class="weui-btn weui-btn_default">页面次操作</a>
</div>
parimary|default
```
-语法点
.weui-btn + .weui-btn 表示有前btn的btn
-webkit-tap-highlight-color:rgba(0,0,0,0);
reset 样式,不同类型的浏览器对按上按钮的高亮颜色不一致
请大家不要踩以下坑:
1、这个属性目前是实验属性,所以要加前缀 -webkit
Android和IOS 手机浏览器都是 -webkit
PC端 IE -ms等浏览器无法预览此效果
2、怎么看效果
首先把值改成-webkit-tap-highlight-color:rgba(0,0,0,0.5);
PC端是看不到效果的,只有在移动端才生效
我还在小程序中测试了一下WEUI的反馈
-webkit-tap-highlight在小程序是不起作用的
小程序中 *{}选择符不能用
顶级元素不再是body而是page
综上所述,在浏览器端,要对-webkit-tap-hight-light-color用rgba(0,0,0,0)透明度做下重置,让所有的都一致
按上去的交互建议使用低等级的 :active伪类 在网页和小程序里都可以生效