你写的下面的那个css选择器中间没有加空格，代表的是同时拥有class为ucenter-left和class为ucenter-l-header的元素，举例：
<div class="ucenter-left ucenter-l-header"></div>新建一个页面，如下图。
把checkbox藏起来，切换按钮主要用label实现。给label加上适当的css属性
给label加上before和after伪类。before作为下面的横槽，after作为切换的圆按钮
先给label加上定位的css
#chk-toggle + label:before,
#chk-toggle + label:after {
display: block
position: absolute
top: 1px
left: 1px
bottom: 1px
content: ""
}
如果不写bottom，那before和after还需要分别写高度
加上原型按钮
#chk-toggle + label:after {
width: 58px
background-color: #fff
border-radius: 100%
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3)
transition: margin 0.4s
}
加底
#chk-toggle + label:before {
right: 1px
background-color: #f1f1f1
border-radius: 60px
transition: background 0.4s
}
注意，after和before中的transition都是为了之后的切换动作用的
现在只差最后的checked了
#chk-toggle:checked + label:before {
background-color: #8ce196
}
#chk-toggle:checked + label:after {
margin-left: 60px
}
在console中可以看到切换时，checkbox的状态
Bug调试1:doctype没声明,带来的IE浏览器盒模型解析bug
解决: 进行xhtml 正确声明,如strict声明
2:浏览器的初始值不同带来的.
解决:进行css初始化.
3:自身代码不规范带来的bug,
解决:面壁
4:浏览器的bug带来的.
4.1 IE6, 有双倍margin bug
是指:浮动方向上的margin值会加倍.
例如: 某元素 float:leftmargin-left的值是10px, 那么页面上会解析为20px
同时 ,float:right, margin-right也会加倍
解决方案: 设置漂浮元素的_display:inline
4.2: 3像素bug,
解决:规范float的用法
4.3: IE关于a标签的4个伪类的兼容bug
答:对于IE, 如果a:link方式声明了标签的样式
可能会引来 visited伪类的解析异常
解决: 去掉a:link,以 a 来代替
