CSS Selectors 伪类选择符2
弘伟彦
细线表格 border-collapse: collapse; 宽度 width; 盒子居中 margin: 0 auto;
加粗 bold normal: font: bold normal 18px “”; 细线,灰色(边框) border: 1px solid gray;
虚线,灰色 border: 1px dashed gray; 内边距 padding: 5px; 文本居中 text-align: center; button 按钮
隔行效果(odd even 2n+1):
.t > tbody > tr:nth-of-type(odd) {
background-color: #c4c4c4;}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>伪类2</title>
<meta name="Keywords" content="关键字">
<meta name="description" content="简介">
<!-- 细线表格 border-collapse: collapse;
宽度 width: 80%;
盒子居中 margin: 0 auto;
加粗 bold normal: font: bold normal 18px "";
细线,灰色(边框) border: 1px solid gray;
虚线,灰色 border: 1px dashed gray;
内边距 padding: 5px;
文本居中 text-align: center;
隔行效果(odd even 2n+1):
.t > tbody > tr:nth-of-type(odd) {
background-color: #c4c4c4;}
button 按钮
-->
<style>
.t {
/*细线表格*/
border-collapse: collapse;
/*宽度*/
width: 80%;
/*盒子居中*/
margin: 0 auto;
}
.t > caption {
/*加粗 bold normal*/
font: bold normal 18px "";
color: #07dc07;
}
/*.t tr>* {}*/
.t th, .t td {
/*细线,灰色(边框)*/
border: 1px solid gray;
/*虚线,灰色*/
/*border: 1px dashed gray;*/
/*内边距*/
padding: 5px;
/*文本居中*/
text-align: center;
}
/*行高*/
.t > thead > tr {
line-height: 35px;
background-color: #fdfdf7;
}
/*隔行效果*/
/* odd even 2n+1 */
.t > tbody > tr:nth-of-type(odd) {
background-color: #c4c4c4;
}
.t > tbody > tr:nth-of-type(even) {
background-color: #fdfdf7;
}
/*鼠标经过*/
.t > tbody > tr:hover {
background-color: green;
}
</style>
</head>
<body>
<table class="t">
<caption>学生信息表:</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>专业</th>
<th>地区</th>
<th>基本操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>202101</td>
<td>徐凤年</td>
<td>史学</td>
<td>北凉</td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td>202102</td>
<td>徐龙象</td>
<td>物理</td>
<td>北凉</td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td>202103</td>
<td>徐渭熊</td>
<td>史学</td>
<td>北凉</td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td>202104</td>
<td>徐脂虎</td>
<td>文学</td>
<td>北凉</td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td>202105</td>
<td>祝禄山</td>
<td>史学</td>
<td>北凉</td>
<td>
<button>删除</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>
类似资料：