by zhangxinxu 2010-09-14 22:05

selectivizr一些功能测试

测试数据

第1个普通的文字 第2个普通的文字 含title属性的文字 第3个普通的文字 第4个普通的文字 第5个普通的文字 最后1个普通的文字
HTML代码:
<div id="test" class="f9 mb20"> <span>第1个普通的文字</span> <span>第2个普通的文字</span> <span title="title">含title属性的文字</span> <span>第3个普通的文字</span> <span>第4个普通的文字</span> <span>第5个普通的文字</span> <span></span> <span>最后1个普通的文字</span> </div>

1. [attr]属性测试:

CSS代码:
#test span[title]{font-weight:bold; color:#ff3300;}

2. nth-child测试:

CSS代码:
#test span:nth-child(4){background:#34538b; color:#fff;}

3. first-child测试:

CSS代码:
#test span:first-child{border-top:2px solid #34538b; border-bottom:2px solid orange; font-style:oblique;}

4. last-child测试:

CSS代码:
#test span:last-child{text-decoration:line-through; border:1px solid #a0b3d6;}

5. :empty测试:

CSS代码:
#test span:empty{display:inline-block; width:100px; height:20px; background:#63C; vertical-align:middle;}