E:target 表示当前的URL片段的元素类型，这个元素必须是E
E:disabled 表示不可点击的表单控件
E:enabled 表示可点击的表单控件
E:checked 表示已选中的checkbox或radio
E::after 生成内容在E元素后
E:not(s) 表示E元素不被匹配
E~F表示E元素毗邻的F元素
E:first-line选中第一行文字
E:first-letter选中第一个字
E::selection 当文字被选中时触发效果【注意是双冒号】
Content 属性：
E:after 利用content属性在元素末尾添加内容
E:before 利用content属性在元素开头添加内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>checked伪类与~选择器实现好看选择框效果</title>
<link rel="stylesheet" href="">
<style>
*{margin:0; padding:0;}
label{
width:30px;
height:30px;
position:relative;
margin-right:5px;
float:left;
overflow:hidden;
}
span{float:left; width:30px; height:30px; background:blue; }
input[type=radio]{
position:absolute;
left:-30px;
top:-30px;
}
input:checked~span{
background:red;
}
</style>
</head>
<body>
<label><input type="radio" name="tab" /><span></span></label>
<label><input type="radio" name="tab" /><span></span></label>
<label><input type="radio" name="tab" /><span></span></label>
</body>
</html>