<!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>