<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
background-color: #bbc;
}
header{
width: 100%;
text-align: center;
height: 50px;
margin-top: 20px;
line-height: 50px;
font-family: "微软雅黑";
font-size: 25px;
color: #DDFFFF;
letter-spacing: 2px;
}
table{
margin: 100px auto;
}
table td{
width: 100px;
height: 30px;
text-align: center;
color: #333;
}
tr:first-child{
background-color: #ddd;
}
tr:nth-last-child(2){
background-color: #def;
}
tr:nth-child(2){
background-color: #fde;
}
tr:nth-child(3){
background-color: #dff;
}
tr:last-child{
background-color: #fbc;
}
td:nth-last-child(4){
background-color: #bcf;
}
tr:nth-child(2)>td:nth-child(2){
background-color: #dbf;
}
tr:nth-child(4) td:nth-child(3){
background-color: #bac;
}
td[style]{
background-color: #dac;
}
td[class~="name"]{
background-color: #efadcb;
}
td[class*="set"]{
background-color: #defacb;
}
td[class*="set"]+td+td{
background-color: #3d21bc;
}
</style>
</head>
<body>
<header>
CSS3选择器练习
</header>
<section>
<table cellpadding="0" cellspacing="3">
<tr>
<td>11
</td>
<td class="name set">12
</td>
<td>13
</td>
<td>14
</td>
<td>15
</td>
<td>16
</td>
<td>17
</td>
</tr>
<tr>
<td>21
</td>
<td>22
</td>
<td>23
</td>
<td>24
</td>
<td>25
</td>
<td class="name">26
</td>
<td>27
</td>
</tr>
<tr>
<td>31
</td>
<td>32
</td>
<td>33
</td>
<td class="name">34
</td>
<td>35
</td>
<td>36
</td>
<td>37
</td>
</tr>
<tr>
<td>31
</td>
<td>32
</td>
<td>33
</td>
<td>34
</td>
<td>35
</td>
<td>36
</td>
<td style="">37
</td>
</tr>
<tr>
<td>31
</td>
<td>32
</td>
<td>33
</td>
<td>34
</td>
<td>35
</td>
<td>36
</td>
<td>37
</td>
</tr>
</table>
</section>
</body>
</html>
转载于:https://www.cnblogs.com/wmwPro/p/5642903.html
