偶數與奇數規則 CSS :nth-child(even) :nth-child(odd)

偶數與奇數規則 CSS :nth-child(even) :nth-child(odd)

一種提高易於閱讀大型表格的方法是每，排以色調交替譬如，下面的 table 顯示淺灰色背景的 偶數排，以及白底的奇數排，這規則在此非常簡單。
table:nth-child(even) {background: #CCC}
table:nth-child(odd) {background: #FFF}

<style> table tr:first-child {background: red} table tr:last-child {background: yellow} table td {width:80px} </style> <table border="1"><tbody> <tr><th colspan="8"> CSS table tr:first-child {background: red} </th></tr> <tr><td>Month </td><td>芒果 </td><td>火龙果 </td><td>燈 </td><td>奇異果 </td><td>芒果 </td><td>哈密瓜 </td><td>香蕉 </td></tr> <tr> <td>Jan </td><td>14 </td><td>13 </td><td>14 </td><td>13 </td><td>14 </td><td>11 </td><td>11 </td></tr> <tr> <td>Feb </td><td>13 </td><td>15 </td><td>12 </td><td>15 </td><td>15 </td><td>12 </td><td>14 </td></tr> <tr> <td>Mar </td><td>16 </td><td>15 </td><td>14 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Apr </td><td>17 </td><td>16 </td><td>17 </td><td>17 </td><td>17 </td><td>15 </td><td>15 </td></tr> <tr> <td>May </td><td>21 </td><td>20 </td><td>20 </td><td>21 </td><td>22 </td><td>20 </td><td>21 </td></tr> <tr> <td>Jun </td><td>24 </td><td>23 </td><td>25 </td><td>24 </td><td>25 </td><td>23 </td><td>25 </td></tr> <tr> <td>Jul </td><td>29 </td><td>28 </td><td>26 </td><td>26 </td><td>27 </td><td>26 </td><td>25 </td></tr> <tr> <td>Aug </td><td>29 </td><td>28 </td><td>27 </td><td>28 </td><td>28 </td><td>27 </td><td>26 </td></tr> <tr> <td>Sep </td><td>24 </td><td>23 </td><td>23 </td><td>26 </td><td>24 </td><td>24 </td><td>24 </td></tr> <tr> <td>Oct </td><td>20 </td><td>22 </td><td>20 </td><td>22 </td><td>20 </td><td>19 </td><td>20 </td></tr> <tr> <td>Nov </td><td>18 </td><td>17 </td><td>16 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Dec </td><td>15 </td><td>13 </td><td>13 </td><td>14 </td><td>13 </td><td>10 </td><td>13 </td></tr> <tr><th colspan="8"> table tr:last-child {background: yellow} </th></tr> </tbody></table>

00

<style> table.reference,table.tecspec { border-collapse: collapse; width: 80%; font-size: 20px; margin: 0 auto; } table.reference th{ border: 1px solid #000080; width:100px; height:40px; } table.reference td { border: 1px solid #000080; height:30px; text-align: center; vertical-align: middle;} table.reference tr:nth-child(2n+2) { background-color: orange } </style> <table class="reference"><tbody> <tr><th colspan="8"> CSS table.reference tr:nth-child(2n+2) {background-color: orange} </th></tr> <tr><td>Month </td><td>芒果 </td><td>火龙果 </td><td>燈 </td><td>奇異果 </td><td>芒果 </td><td>哈密瓜 </td><td>香蕉 </td></tr> <tr> <td>Jan </td><td>14 </td><td>13 </td><td>14 </td><td>13 </td><td>14 </td><td>11 </td><td>11 </td></tr> <tr> <td>Feb </td><td>13 </td><td>15 </td><td>12 </td><td>15 </td><td>15 </td><td>12 </td><td>14 </td></tr> <tr> <td>Mar </td><td>16 </td><td>15 </td><td>14 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Apr </td><td>17 </td><td>16 </td><td>17 </td><td>17 </td><td>17 </td><td>15 </td><td>15 </td></tr> <tr> <td>May </td><td>21 </td><td>20 </td><td>20 </td><td>21 </td><td>22 </td><td>20 </td><td>21 </td></tr> <tr> <td>Jun </td><td>24 </td><td>23 </td><td>25 </td><td>24 </td><td>25 </td><td>23 </td><td>25 </td></tr> <tr> <td>Jul </td><td>29 </td><td>28 </td><td>26 </td><td>26 </td><td>27 </td><td>26 </td><td>25 </td></tr> <tr> <td>Aug </td><td>29 </td><td>28 </td><td>27 </td><td>28 </td><td>28 </td><td>27 </td><td>26 </td></tr> <tr> <td>Sep </td><td>24 </td><td>23 </td><td>23 </td><td>26 </td><td>24 </td><td>24 </td><td>24 </td></tr> <tr> <td>Oct </td><td>20 </td><td>22 </td><td>20 </td><td>22 </td><td>20 </td><td>19 </td><td>20 </td></tr> <tr> <td>Nov </td><td>18 </td><td>17 </td><td>16 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Dec </td><td>15 </td><td>13 </td><td>13 </td><td>14 </td><td>13 </td><td>10 </td><td>13 </td></tr> </tbody></table> <style> table.reference,table.tecspec { border-collapse: collapse; width: 80%; font-size: 20px; margin: 0 auto; } table.reference th{ border: 1px solid #000080; width:100px; height:40px; } table.reference td { border: 1px solid #000080; height:30px; text-align: center; vertical-align: middle;} table.reference tr:nth-child(3n+2) { background-color: orange } </style> <table class="reference"><tbody> <tr><th colspan="8"> CSS table.reference tr:nth-child(3n+2) {background-color: orange} </th></tr> <tr><td>Month </td><td>芒果 </td><td>火龙果 </td><td>燈 </td><td>奇異果 </td><td>芒果 </td><td>哈密瓜 </td><td>香蕉 </td></tr> <tr> <td>Jan </td><td>14 </td><td>13 </td><td>14 </td><td>13 </td><td>14 </td><td>11 </td><td>11 </td></tr> <tr> <td>Feb </td><td>13 </td><td>15 </td><td>12 </td><td>15 </td><td>15 </td><td>12 </td><td>14 </td></tr> <tr> <td>Mar </td><td>16 </td><td>15 </td><td>14 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Apr </td><td>17 </td><td>16 </td><td>17 </td><td>17 </td><td>17 </td><td>15 </td><td>15 </td></tr> <tr> <td>May </td><td>21 </td><td>20 </td><td>20 </td><td>21 </td><td>22 </td><td>20 </td><td>21 </td></tr> <tr> <td>Jun </td><td>24 </td><td>23 </td><td>25 </td><td>24 </td><td>25 </td><td>23 </td><td>25 </td></tr> <tr> <td>Jul </td><td>29 </td><td>28 </td><td>26 </td><td>26 </td><td>27 </td><td>26 </td><td>25 </td></tr> <tr> <td>Aug </td><td>29 </td><td>28 </td><td>27 </td><td>28 </td><td>28 </td><td>27 </td><td>26 </td></tr> <tr> <td>Sep </td><td>24 </td><td>23 </td><td>23 </td><td>26 </td><td>24 </td><td>24 </td><td>24 </td></tr> <tr> <td>Oct </td><td>20 </td><td>22 </td><td>20 </td><td>22 </td><td>20 </td><td>19 </td><td>20 </td></tr> <tr> <td>Nov </td><td>18 </td><td>17 </td><td>16 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Dec </td><td>15 </td><td>13 </td><td>13 </td><td>14 </td><td>13 </td><td>10 </td><td>13 </td></tr> </tbody></table>

<style> table.reference,table.tecspec { border-collapse: collapse; width: 80%; font-size: 20px; margin: 0 auto; } table.reference th{ border: 1px solid #000080; width:100px; height:40px; } table.reference td { border: 1px solid #000080; height:30px; text-align: center; vertical-align: middle;} table.reference tr:first-child{background: red} table.reference tr:nth-child(2n+3) { background-color: orange } </style> <table class="reference"><tbody> <tr><th colspan="8"> CSS table.reference tr:first-child {background: red}<br> 第一行為紅色 </th></tr> <tr><td>Month </td><td>芒果 </td><td>火龙果 </td><td>燈 </td><td>奇異果 </td><td>芒果 </td><td>哈密瓜 </td><td>香蕉 </td></tr> <tr> <td>Jan </td><td>14 </td><td>13 </td><td>14 </td><td>13 </td><td>14 </td><td>11 </td><td>11 </td></tr> <tr> <td>Feb </td><td>13 </td><td>15 </td><td>12 </td><td>15 </td><td>15 </td><td>12 </td><td>14 </td></tr> <tr> <td>Mar </td><td>16 </td><td>15 </td><td>14 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Apr </td><td>17 </td><td>16 </td><td>17 </td><td>17 </td><td>17 </td><td>15 </td><td>15 </td></tr> <tr> <td>May </td><td>21 </td><td>20 </td><td>20 </td><td>21 </td><td>22 </td><td>20 </td><td>21 </td></tr> <tr> <td>Jun </td><td>24 </td><td>23 </td><td>25 </td><td>24 </td><td>25 </td><td>23 </td><td>25 </td></tr> <tr> <td>Jul </td><td>29 </td><td>28 </td><td>26 </td><td>26 </td><td>27 </td><td>26 </td><td>25 </td></tr> <tr> <td>Aug </td><td>29 </td><td>28 </td><td>27 </td><td>28 </td><td>28 </td><td>27 </td><td>26 </td></tr> <tr> <td>Sep </td><td>24 </td><td>23 </td><td>23 </td><td>26 </td><td>24 </td><td>24 </td><td>24 </td></tr> <tr> <td>Oct </td><td>20 </td><td>22 </td><td>20 </td><td>22 </td><td>20 </td><td>19 </td><td>20 </td></tr> <tr> <td>Nov </td><td>18 </td><td>17 </td><td>16 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Dec </td><td>15 </td><td>13 </td><td>13 </td><td>14 </td><td>13 </td><td>10 </td><td>13 </td></tr> </tbody></table> <style> table.reference,table.tecspec { border-collapse: collapse; width: 80%; font-size: 20px; margin: 0 auto; } table.reference th{ border: 1px solid #000080; width:100px; height:40px; } table.reference td { border: 1px solid #000080; height:30px; text-align: center; vertical-align: middle;} table.reference tr:last-child{background: red} table.reference tr:nth-child(2n+3) { background-color: orange } </style> <table class="reference"><tbody> <tr><th colspan="8"> CSS table.reference tr:last-child {background: red}<br> 最尾行為紅色 </th></tr> <tr><td>Month </td><td>芒果 </td><td>火龙果 </td><td>燈 </td><td>奇異果 </td><td>芒果 </td><td>哈密瓜 </td><td>香蕉 </td></tr> <tr> <td>Jan </td><td>14 </td><td>13 </td><td>14 </td><td>13 </td><td>14 </td><td>11 </td><td>11 </td></tr> <tr> <td>Feb </td><td>13 </td><td>15 </td><td>12 </td><td>15 </td><td>15 </td><td>12 </td><td>14 </td></tr> <tr> <td>Mar </td><td>16 </td><td>15 </td><td>14 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Apr </td><td>17 </td><td>16 </td><td>17 </td><td>17 </td><td>17 </td><td>15 </td><td>15 </td></tr> <tr> <td>May </td><td>21 </td><td>20 </td><td>20 </td><td>21 </td><td>22 </td><td>20 </td><td>21 </td></tr> <tr> <td>Jun </td><td>24 </td><td>23 </td><td>25 </td><td>24 </td><td>25 </td><td>23 </td><td>25 </td></tr> <tr> <td>Jul </td><td>29 </td><td>28 </td><td>26 </td><td>26 </td><td>27 </td><td>26 </td><td>25 </td></tr> <tr> <td>Aug </td><td>29 </td><td>28 </td><td>27 </td><td>28 </td><td>28 </td><td>27 </td><td>26 </td></tr> <tr> <td>Sep </td><td>24 </td><td>23 </td><td>23 </td><td>26 </td><td>24 </td><td>24 </td><td>24 </td></tr> <tr> <td>Oct </td><td>20 </td><td>22 </td><td>20 </td><td>22 </td><td>20 </td><td>19 </td><td>20 </td></tr> <tr> <td>Nov </td><td>18 </td><td>17 </td><td>16 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Dec </td><td>15 </td><td>13 </td><td>13 </td><td>14 </td><td>13 </td><td>10 </td><td>13 </td></tr> </tbody></table>

<style> table.reference,table.tecspec { border-collapse: collapse; width: 80%; font-size: 20px; margin: 0 auto; } table.reference th{ border: 1px solid #000080; width:100px; height:40px; } table.reference td { border: 1px solid #000080; height:30px; text-align: center; vertical-align: middle;} col:first-child {background: #FF0} col:nth-child(2n+3) {background: #CCC} </style> <table class="reference"> <col><col><col><col><col><col><col><col> <tbody> <tr><td colspan="8"> col:first-child {background: #FF0}<br> col:nth-child(2n+3) {background: #CCC} </td></tr> <tr><td>Month </td><td>芒果 </td><td>火龙果 </td><td>燈 </td><td>奇異果 </td><td>芒果 </td><td>哈密瓜 </td><td>香蕉 </td></tr><tr> <td>Jan </td><td>14 </td><td>13 </td><td>14 </td><td>13 </td><td>14 </td><td>11 </td><td>11 </td></tr> <tr> <td>Feb </td><td>13 </td><td>15 </td><td>12 </td><td>15 </td><td>15 </td><td>12 </td><td>14 </td></tr> <tr> <td>Mar </td><td>16 </td><td>15 </td><td>14 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Apr </td><td>17 </td><td>16 </td><td>17 </td><td>17 </td><td>17 </td><td>15 </td><td>15 </td></tr> <tr> <td>May </td><td>21 </td><td>20 </td><td>20 </td><td>21 </td><td>22 </td><td>20 </td><td>21 </td></tr> <tr> <td>Jun </td><td>24 </td><td>23 </td><td>25 </td><td>24 </td><td>25 </td><td>23 </td><td>25 </td></tr> <tr> <td>Jul </td><td>29 </td><td>28 </td><td>26 </td><td>26 </td><td>27 </td><td>26 </td><td>25 </td></tr> <tr> <td>Aug </td><td>29 </td><td>28 </td><td>27 </td><td>28 </td><td>28 </td><td>27 </td><td>26 </td></tr> <tr> <td>Sep </td><td>24 </td><td>23 </td><td>23 </td><td>26 </td><td>24 </td><td>24 </td><td>24 </td></tr> <tr> <td>Oct </td><td>20 </td><td>22 </td><td>20 </td><td>22 </td><td>20 </td><td>19 </td><td>20 </td></tr> <tr> <td>Nov </td><td>18 </td><td>17 </td><td>16 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Dec </td><td>15 </td><td>13 </td><td>13 </td><td>14 </td><td>13 </td><td>10 </td><td>13 </td></tr> </tbody></table> <style> table.reference,table.tecspec { border-collapse: collapse; width: 80%; font-size: 20px; margin: 0 auto; } table.reference th{ border: 1px solid #000080; width:100px; height:40px; } table.reference td { border: 1px solid #000080; height:30px; text-align: center; vertical-align: middle;} table.reference tr:nth-child(-n+5) { background-color: orange } table.reference tr:nth-child(n+8) { background-color: red } </style> <table class="reference"><tbody> <tr><th colspan="8"> table.reference tr:nth-child(-n+5){ background-color: orange }<br> table.reference tr:nth-child(n+8) { background-color: red }<br> </th></tr> <tr><td>Month </td><td>芒果 </td><td>火龙果 </td><td>燈 </td><td>奇異果 </td><td>芒果 </td><td>哈密瓜 </td><td>香蕉 </td></tr> <tr> <td>Jan </td><td>14 </td><td>13 </td><td>14 </td><td>13 </td><td>14 </td><td>11 </td><td>11 </td></tr> <tr> <td>Feb </td><td>13 </td><td>15 </td><td>12 </td><td>15 </td><td>15 </td><td>12 </td><td>14 </td></tr> <tr> <td>Mar </td><td>16 </td><td>15 </td><td>14 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Apr </td><td>17 </td><td>16 </td><td>17 </td><td>17 </td><td>17 </td><td>15 </td><td>15 </td></tr> <tr> <td>May </td><td>21 </td><td>20 </td><td>20 </td><td>21 </td><td>22 </td><td>20 </td><td>21 </td></tr> <tr> <td>Jun </td><td>24 </td><td>23 </td><td>25 </td><td>24 </td><td>25 </td><td>23 </td><td>25 </td></tr> <tr> <td>Jul </td><td>29 </td><td>28 </td><td>26 </td><td>26 </td><td>27 </td><td>26 </td><td>25 </td></tr> <tr> <td>Aug </td><td>29 </td><td>28 </td><td>27 </td><td>28 </td><td>28 </td><td>27 </td><td>26 </td></tr> <tr> <td>Sep </td><td>24 </td><td>23 </td><td>23 </td><td>26 </td><td>24 </td><td>24 </td><td>24 </td></tr> <tr> <td>Oct </td><td>20 </td><td>22 </td><td>20 </td><td>22 </td><td>20 </td><td>19 </td><td>20 </td></tr> <tr> <td>Nov </td><td>18 </td><td>17 </td><td>16 </td><td>17 </td><td>16 </td><td>15 </td><td>14 </td></tr> <tr> <td>Dec </td><td>15 </td><td>13 </td><td>13 </td><td>14 </td><td>13 </td><td>10 </td><td>13 </td></tr> </tbody></table>

Edit