htmltable奇偶⾏颜⾊设置(CSS选择器):nth-child(n) 选择器匹配属于其⽗元素的第 N 个⼦元素,不论元素的类型。n 可以是数字、关键词或公式。
下⾯的例⼦, 设置表格的奇偶⾏背景颜⾊不同;单独设置表格的第1列背景颜⾊不同。
1<!DOCTYPE html>
2<html>
3<head>
4<style type="text/css">
5 table{
css设置表格滚动条6 height: 200px;
7 width:400px;
8 border:2px solid green;
9 }
10
11 td{
12 border:1px solid;
13 }
14
15 tr:nth-child(2n){
16 background:#00CCCC;
17 }
18
19 tr td:nth-child(1){
20 background:#FFCCCC;
21 }
22</style>
23</head>
24<body>
25<table>
26<tr>
27<td>1</td><td>2</td><td>3</td>
28</tr>
29<tr>
30<td>1</td><td>2</td><td>3</td>
31</tr>
32<tr>
33<td>1</td><td>2</td><td>3</td>
34</tr>
35<tr>
36<td>1</td><td>2</td><td>3</td>
37</tr>
38</table>
39</body>
40</html>
效果:
可以参考:
www.w3school/cssref/selector_nth-child.asp
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论