伪元素踩坑

项目中改bug时发现的伪元素的坑。

谷歌下效果

火狐下效果

一开始以为是border-radius在火狐中需要前缀-moz-border-radius实际测试时发现火狐是可以支持border-radius的，于是我就有点搞不懂了，在浏览器上查了半天。

火狐下伪元素样式

突然发现在火狐下伪元素并没有实际生效，又寻找了半天找到了原因。

伪元素不支持空元素。

1. 什么是伪元素呢？

伪元素用于向某些选择器设置特殊效果。表示了某个元素的子元素。伪元素也就是假的元素，在实际DOM树中并不存在，所以也不能用js找到元素，绑定事件等，但是可以添加样式。

2. 伪元素的坑

空元素（不能包含内容的元素）不支持::before,::after

比如input，select，img，textarea

解决办法

将伪元素用在非空元素上，比如div，然后就可以了。

修改伪元素

//input按钮同时绑定的事件
// $('.gmi-switch').on('click', function (e) {
  //     var isChecked = $(this).prop('checked');
  //     $(this).prop('checked', isChecked);
  //     if ($(this).prop('checked')) {
  //         $('.mg-payment-cells--vcode').slideDown();
  //     } else {
  //         $('.mg-payment-cells--vcode').slideUp();
  //     }
  // });
$('.gmi-switch').on('click', function (e) {
    //修改checked为模拟
      $(this).toggleClass('checked');
      if ($(this).hasClass('checked')){
          $('.mg-payment-cells--vcode').slideDown();
      } else {
          $('.mg-payment-cells--vcode').slideUp();
      }
  });