WEUI 源码学习

-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伪类 在网页和小程序里都可以生效