您当前的位置： 首页 > 学无止境 > CSS3|Html5 网站首页CSS3|Html5
css选择器实例-文件类型及隔行换色
发布时间：2015-06-16 17:01:27编辑：雪饮阅读（）
仿百度文库搜索结果页
<!doctype html>
<html>
<head>
<style>
a[href$="html"]::before{content:url(images/web.jpg)}
a[href$="txt"]::before{content:url(images/txt.jpg)}
a[href$="rar"]::before{content:url(images/rar.jpg)}
a[href$="avi"]::before{content:url(images/qvod.jpg)}
a[href$="doc"]::before{content:url(images/word.jpg)}
a[href$="xls"]::before{content:url(images/excel.jpg)}
a[href$="ppt"]::before{content:url(images/ppt.jpg)}
</style>
</head>
<body>
<p><a href="index.html">在线web浏览</a></p>
<p><a href="html5.txt">TXT文档</a></p>
<p><a href="html5.rar">压缩文档</a></p>
<p><a href="html5.avi">高清无码的HTML5大片</a></p>
<p><a href="html5.doc">HTML5word文档</a></p>
<p><a href="html5.xls">HTML5excel文档</a></p>
<p><a href="html5.ppt">HTML5幻灯片</a></p>
</body>
</html>
预览图：
table的隔行换色实现
原生版实现：
<!doctype html>
<html>
<head>
<style>
.odd{background:red}
</style>
</head>
<body>
<table width="500" border="1" id="test">
<tr class="odd">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="odd">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="odd">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="odd">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="odd">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
css3版实现：
table-css3
<!doctype html>
<html>
<head>
<style>
#test tr:nth-child(odd){background:red}
#test tr:first-child{background:green}
/*需要注意:
要先设定奇数行的颜色，再设定第一行的颜色
*/
</style>
</head>
<body>
<table width="500" border="1" id="test">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
table-css3 last版本
<!doctype html>
<html>
<head>
<style>
#test tr:nth-last-child(even){background:red}
#test tr:first-child{background:green}
</style>
</head>
<body>
<table width="500" border="1" id="test">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
table-css3 last版本预览图：
关键字词：css3,选择器,个人博客