nth-child选择器用于表格

来源：互联网发布：域名dns查询 java 编辑：程序博客网时间：2024/05/18 02:52

行中格与格之间的区别：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>:nth-child()</title>    <style type="text/css">        /*此处补充样式*/        thead tr th{            background:yellow;        }        tbody tr td:nth-child(odd){            color:orange;        }        tbody tr td:nth-child(even){            color:green;        }    </style></head><body>    <table border="1" cellspacing="0" width="200">        <thead>            <tr>                <th>序号</th>                <th>姓名</th>                <th>性别</th>                <th>年纪</th>            </tr>        </thead>        <tbody>             <tr>                <td>1</td>                <td>张三</td>                <td>男</td>                <td>12</td>            </tr>            <tr>                <td>2</td>                <td>李四</td>                <td>女</td>                <td>11</td>            </tr>            <tr>                <td>3</td>                <td>赵五</td>                <td>男</td>                <td>12</td>            </tr>            <tr>                <td>4</td>                <td>王二</td>                <td>男</td>                <td>12</td>            </tr>        </tbody>      </table></body></html>

行与行之间的区别：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>:nth-child()</title>    <style type="text/css">        /*此处补充样式*/        thead tr th{            background:yellow;        }        tbody tr:nth-child(odd){            color:orange;        }        tbody tr:nth-child(even){            color:green;        }    </style></head><body>    <table border="1" cellspacing="0" width="200">        <thead>            <tr>                <th>序号</th>                <th>姓名</th>                <th>性别</th>                <th>年纪</th>            </tr>        </thead>        <tbody>             <tr>                <td>1</td>                <td>张三</td>                <td>男</td>                <td>12</td>            </tr>            <tr>                <td>2</td>                <td>李四</td>                <td>女</td>                <td>11</td>            </tr>            <tr>                <td>3</td>                <td>赵五</td>                <td>男</td>                <td>12</td>            </tr>            <tr>                <td>4</td>                <td>王二</td>                <td>男</td>                <td>12</td>            </tr>        </tbody>      </table></body></html>

阅读全文

0 0