伪类用单冒号
我们平时熟悉的a:link、a:visited、a:hover和a : active
伪元素用双冒号（为了更好的兼容我们也用单冒号）
常用的:before :after和 :first-line :first-letter ::selection
先看三篇博客：
http://blog.dimpurr.com/css-before-after/
http://blog.jobbole.com/49173/
<style>
div{
width:98px;height:48px;
border:2px solid red;
border-bottom:48px solid red;
border-radius:50%;
position:relative;
// transition:2s all ease;
}
div:before{
content:"";
position:absolute;
width:8px;height:8px;
background:#fff;
border:20px solid red;
left:0;top:50%;
border-radius:50%;
}
div:after{
content:"";
position:absolute;
width:8px;height:8px;
background:red;
border:21px solid #fff;
right:0;top:50%;
border-radius:50%;
}
</style>
<script>
window.onload=function () {
var div=document.getElementsByTagName("div")[0];
div.onmouseover=function () {
div.style.transform="rotate(180deg)";
}
div.onmouseout=function () {
div.style.transform="rotate(0deg)";
}
}
</script>
<body>
<div>
</div>
</body>