为了实现ridio 选中ridio 样子自动变用了input:checked + .ridio {background-image:url(../img/radio1.png)}实现，但是后来发现：checked 选择器ie8以下不能识别，最近从一个大神那发现了了一个可以使ie8版本识别css3伪类和属性选择器selectivizr，地址为http://www.zhangxinxu.com/wordpress/2010/09/selectivizr-%E8%AE%A9ie6ie7ie8%E6%94%AF%E6%8C%81css3%E4%BC%AA%E7%B1%BB%E5%92%8C%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8/
实际使用时发现，ridio 选中样式不会随着点击选中而改变样子，看起来好像就没有什么作用。后来发现，原来在ie8下我的Input隐藏了display:none这种写法好像ie8默认不能点击，只能用filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0)来透明隐藏住按钮，但是input所占的空间还是存在的，这样看起来比较丑，但是目前也没啥比较好的解决方法，只想这个样式在ie8以下使用就好，ie9以上还是用display:none来实现。
问题来了，之前是：root来区分ie9的hack的，结果selectivizr支持了：root属性，只能换了另一种写法
[html] view plain copy
<span style="font-size:14px">.hide{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0)}
@media all and (min-width:0) {
.hide{display:none}
}
</span>
CSS的选择器可以分为三类，即id选择器、class选择器、标签选择器。h5的有点如下
H5的最显著的优势在于跨平台性，用H5搭建的站点与应用可以兼容PC端与移动端、Windows与Linux、安卓与IOS。
H5的本地存储特性也给使用者带来了更多便利。
1.CSS部分类似这样子的命名：
复制代码代码如下:
.example:before, .example before {}
.example:after, .example after {}
一个有冒号，一个是空格分隔。前者IE8+及其他现代浏览器；后者为IE6-7准备的。
2.HTML部分
如果before/after伪类元素含有content内容（不是空字符），则content内容在HTML标签上呈现（方便IE6/7下获取），例如：
复制代码代码如下:
<div class="example" data-content=""></div>
CSS部分的content属性值应该如下：
复制代码代码如下:
.example:before, .example before { content: attr(data-content)... }
.example:after, .example after { content: attr(data-content)... }
3.JS部分
JS是为IE6/7准备的，所做的事情很简单，网元素内部插入两个元素，标签名为”before“或”after“或同时。方法代码如下：
复制代码代码如下:
var $beforeAfter = function(dom) {
if (document.querySelector || !dom &&dom.nodeType !== 1) return
var content = dom.getAttribute("data-content") || ''
var before = document.createElement("before") //可以根据需要把after或before删除一个
, after = document.createElement("after")//默认会把两个都加上
// 内部content
before.innerHTML = content
after.innerHTML = content
// 前后分别插入节点
dom.insertBefore(before, dom.firstChild)
dom.appendChild(after)
}
4.调用
$beforeAfter(document.getElementById("tip"))//tip是需要的id名
