!代码：伪类

 

伪类有：:first-child ，:link:，vistited，:hover，:active，:focus，:lang 
伪元素有：:first-line，:first-letter，:before，:after

:before 和 :after 的文章： http://www.zhangxinxu.com/wordpress/2012/11/before-after-use-web/

 

 :before（前面），:after（后面）  示例：

<style type="text/css">
.cc:before{content:'';display:block;height:2px;background:#f00;}/*前面*/
.cc:after{content:'';display:block;height:2px;background:#00f;}/*后面*/
.cc{border:2px solid #333;padding:3px;background:#f0f0f0;}
</style>
<div class="cc">aaaaaa</div>

 用伪类做黑色透明背景：（例子）

<style type="text/css">
body{background:url("http://e.hiphotos.baidu.com/news/q%3D100/sign=2fbc4493fedcd100cb9cfc21428a47be/4afbfbedab64034f6c8b2c98a9c379310b551ded.jpg");}
.boxs{position:relative;width:300px;height:200px;}
.box:before{content:'';display:block;position:absolute;left:0;right:0;top:0;bottom:0;background:#000;opacity:0.6;filter:alpha(opacity=60);z-index:-1;}
.box{position:absolute;bottom:0;left:0;right:0;top:0;bottom:0;box-sizing:border-box;padding:1em;color:#FFF;font-size:1rem;z-index:1;}
</style>
<div class="boxs">
<div class="box">用伪类做：黑色透明背景</div>
</div>

 用伪类改内容：（例子）

<style type="text/css">
.star1:after, .example star1 { content:attr(data-content);color:#999;}
.star2:after, .example star2 { content:attr(data-content);color:blue;}
.star3:after, .example star3 { content:attr(data-content);color:red;}
</style>
<div class="star1" data-content="★">aaaaaaaaaaaa</div>
<div class="star2" data-content="★★">aaaaaaaaaaaa</div>
<div class="star3" data-content="★★★">aaaaaaaaaaaa</div>

 

 

 

 css清除浮动方法: （讲解）（hasLayout）

<style type="text/css">.clearfix:after{content:"\0020";display:block;height:0;clear:both;}
.clearfix{zoom:1;}
</style>
<div class="clearfix">
    <div style="float:left;width:45%;">清除浮动例子</div> 
    <div style="float:right;width:45%;">清除浮动例子1111</div> 
</div> 

 

<li>列表的奇数行和偶数行变色、<table>的行变色。

参考阅读：

http://jingyan.baidu.com/article/aa6a2c14cea0120d4c19c4ec.html

http://www.cnblogs.com/2050/p/3569509.html

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。
同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。

li:first-of-type{background:#ff9;}/*第一列*/
li:last-of-type{background:#ff9;}/*最后一列*/
li:nth-of-type(2){background:#ff9;}/*第二行*/
li:nth-of-type(3n){background:#ff9;}/*第3、6、9…行*/
li:nth-of-type(odd){background:#ff9;}/*奇数行*/
li:nth-of-type(even){background:#ff9;}/*偶数行*/

li:first-child{background:#ff9;}
li:last-child{background:#ff9;}
li:nth-child(2){background:#ff9;}/*第二行*/
li:nth-child(3n+1){background:#ff9;}/*第1、4、7…行*/
li:nth-child(odd){background:#ff9;}/*奇数行*/
li:nth-child(even){background:#ff9;}/*偶数行*/

tr:nth-child(2){background:#ff99ff;}/*表格的第二行*/
tr :nth-child(2){background:#ff9900;}/*表格的第二列*/

 

一个例子：城市列表，每4列换行

<style type="text/css">
html{font-size:62.5%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{background:#f5f5f5;}
body{font-size:1.4rem;line-height:1.4;color:#333;font-family:'Microsoft YaHei', Helvetica, Arial, sans-serif;min-width:320px;max-width:720px;margin:0 auto;}
ul,li{margin:0;padding:0;list-style:none;}
.hot-city {padding: 0 4% 6% 4%;}
.hot-city li{width:22%;margin-top:4%;margin-right:4%;float:left;text-align:center;line-height:2.4;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;
    background:#fff;border: 1px solid #dadada;-webkit-border-radius:4px;-ms-border-radius:4px;border-radius:4px;}
.hot-city li.active{background:#ff7200;color:#fff;}
.hot-city li:nth-of-type(4n) {margin-right:0;}/*第4列*/
.clearfix:after{content:'';display:block;height:0;overflow:hidden;clear:both;}
</style>
<ul class="hot-city clearfix">
<li class="active">北京</li><li>上海</li><li>天津</li><li>武汉</li>
<li>成都</li><li>石家庄</li><li>哈尔滨</li><li>大连</li>
<li>济南</li><li>杭州</li><li>西安</li><li>重庆</li>
<li>长春</li><li>沈阳</li><li>呼和浩特</li><li>乌鲁木齐</li>
<li>兰州</li><li>西宁</li><li>银川</li><li>郑州</li>
<li>太原</li><li>合肥</li><li>南京</li><li>贵阳</li>
<li>昆明</li><li>南宁</li><li>南昌</li><li>广州</li>
<li>福州</li><li>海口</li>
</ul>

 

 

 

...