CSS伪类样式(1) - 前端开发

<!DOCTYPE html>
<html>
<head>
<title>伪类选择器Test01</title>
<style type="text/css">
 table{width:100%;border-collapse:collapse;border-spacing:0;border:1px solid #69f;}
 table td{
 height:26px;
 line-height:26px;
 text-align:center;
 border:1px solid #36f;
 }
 table input[type="text"]{
 border:0px;
 width:98%;
 height:24px;
 line-height:24px;
 }
 
 table td:nth-child(1),td:nth-child(3),td:nth-child(5){
 background:#69f;
 color:white;
 text-align:center;
 width:10%;
 }
 table tr[hide="5"] td:nth-child(1),tr[hide="5"] td:nth-child(3),tr[hide="5"] td:nth-child(5){
 background:#f96;
 color:blue;
 text-align:center;
 width:10%;
 }
 tr:nth-child(1) input,tr:nth-child(3) input,tr:nth-child(5) input{
 display:none;
 }
 tr:nth-child(1),tr:nth-child(3) ,tr:nth-child(5){
 background:#def;
 }
 table tr{
 background:expression(this.sourceIndex%2?'#0cf':'#fc0'; 
 }
</style>
</head>
<body>
<table border="1" align="center">
<tr>
 <td>Label</td>
 <td><input type="text"></input></td>
 <td>Label</td>
 <td colspan="3"><input type="text"></input></td>
 
</tr>
<tr>
 <td>Label</td>
 <td><input type="text"></input></td>
 <td>Label</td>
 <td><input type="text"></input></td>
 <td>Label</td>
 <td><input type="text"></input></td>
</tr>
<tr>
 <td>Label</td>
 <td><input type="text"></input></td>
 <td>Label</td>
 <td><input type="text"></input></td>
 <td>Label</td>
 <td><input type="text"></input></td>
</tr>
<tr>
 <td>Label</td>
 <td><input type="text"></input></td>
 <td>Label</td>
 <td><input type="text"></input></td>
 <td>Label</td>
 <td><input type="text"></input></td>
</tr>
<tr>
 <td>Label</td>
 <td><input type="text"></input></td>
 <td>Label</td>
 <td><input type="text"></input></td>
 <td>Label</td>
 <td><input type="text"></input></td>
</tr>

<tr>
 <td>Label</td>
 <td><input type="text"></input></td>
 <td>Label</td>
 <td colspan="3"><input type="text"></input></td>
 
</tr>
<tr hide="5">
 <td>Label</td>
 <td><input type="text"></input></td>
 <td>Label</td>
 <td><input type="text"></input></td>
 <td>Label</td>
 <td><input type="text"></input></td>
</tr>
<tr>
 <td>Label</td>
 <td><input type="text"></input></td>
 <td>Label</td>
 <td><input type="text"></input></td>
 <td>Label</td>
 <td><input type="text"></input></td>
</tr>
<tr>
 <td>Label</td>
 <td><input type="text"></input></td>
 <td>Label</td>
 <td><input type="text"></input></td>
 <td>Label</td>
 <td><input type="text"></input></td>
</tr>
<tr>
 <td>Label</td>
 <td><input type="text"></input></td>
 <td>Label</td>
 <td><input type="text"></input></td>
 <td>Label</td>
 <td><input type="text"></input></td>
</tr>
</table>
</body>
</html>

你可能感兴趣的:(CSS伪类样式)