CSS2实现的隔行换色-巨人网络通讯

主页 > 知识库 > CSS2实现的隔行换色

CSS2实现的隔行换色

利用了CSS2 的相邻选择符 IE7以下不支持

隔行换色示例:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
html xmlns="http://www.w3.org/1999/xhtml">
head>
title>放弃class与js实现隔行换色效果/title>
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
meta name="Author" content="PengRong" />

style type="text/css">
!-- /* PR-CSS */
table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
table td {border:solid #999;border-width:0 1px 1px 0;}

tr {background:#eee;}
tr + tr {background:#ccc;}
tr + tr + tr {background:#eee;}
tr + tr + tr + tr {background:#ccc;}
tr + tr + tr + tr + tr {background:#eee;}
-->
/style>
/head>

body>
table>
tr>
td>12/td>td>12/td>td>12/td>td>12/td>
/tr>
tr>
td>12/td>td>12/td>td>12/td>td>12/td>
/tr>
tr>
td>12/td>td>12/td>td>12/td>td>12/td>
/tr>
tr>
td>12/td>td>12/td>td>12/td>td>12/td>
/tr>
tr>
td>12/td>td>12/td>td>12/td>td>12/td>
/tr>
/table>
/body>
/html>

隔列换色示例：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
html xmlns="http://www.w3.org/1999/xhtml">
head>
title>放弃class与js实现隔列换色效果/title>
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
meta name="Author" content="PengRong" />

style type="text/css">
!-- /* PR-CSS */
table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
table td {border:solid #999;border-width:0 1px 1px 0;}

td {background:#eee;}
td + td {background:#ccc;}
td + td + td {background:#eee;}
td + td + td + td {background:#ccc;}
td + td + td + td + td {background:#eee;}
-->
/style>
/head>

body>
table>
tr>
td>12/td>td>12/td>td>12/td>td>12/td>
/tr>
tr>
td>12/td>td>12/td>td>12/td>td>12/td>
/tr>
tr>
td>12/td>td>12/td>td>12/td>td>12/td>
/tr>
tr>
td>12/td>td>12/td>td>12/td>td>12/td>
/tr>
tr>
td>12/td>td>12/td>td>12/td>td>12/td>
/tr>
/table>
/body>
/html>

您可能感兴趣的文章:

表格隔行换色 css expression
不用javascript实现带序号的表格隔行换色的效果
li隔行换色改进版
jQuery 隔行换色支持键盘上下键，按Enter选定值
表格隔行换色升级版
Js 实现表格隔行换色一例
javascript 隔行换色函数代码
基于Jquery的表格隔行换色，移动换色，点击换色插件
jQuery方法简洁实现隔行换色及toggleClass的使用
使用jquery hover事件实现表格的隔行换色功能示例
原生javascript实现隔行换色

标签：沧州红河沈阳上海长治乐山新疆河南

巨人网络通讯声明：本文标题《CSS2实现的隔行换色》，本文关键词；如发现本文内容存在版权问题，烦请提供相关信息告之我们，我们将及时沟通与处理。本站内容系统采集于网络，涉及言论、版权与本站无关。

CSS2实现的隔行换色

QQ咨询

电话咨询