如何通过 CSS nth-child 选择器对表格行进行不同的样式设置？

矫情吗；* 2023-09-30 12:24 7阅读 0赞

#### **以不同方式设置备用 HTML 表格行的样式** ####

您可以使用**CSS nth-child 选择器**以不同方式设置备用表行的样式。您不仅可以设置替代行的样式，还可以为具有给定编号的行指定不同的样式。例如，每第 3 行或第 4 行的样式与其他行不同。

请参阅下面的示例，我将在第 n 个子选择器中使用奇数、偶数和其他数字。

#### **通过奇数设置交替行样式的示例** ####

在此示例中，奇数值用于第 n 个子选择器。这意味着，第一（标题）、第三、第五行将被分配在 nth-child 选择器中指定的样式：

![207dffff721cb0a2eaaf5f7d1900f816.png][]

**[查看在线演示和代码][Link 1]**

下面的 CSS 类被使用并应用于 HTML 表格：

<table style="margin-left:0px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#333e53;text-align:left;vertical-align:top;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:center;">
       1 
     </div> 
     <div style="margin-left:0;text-align:center;">
       2 
     </div> 
     <div style="margin-left:0;text-align:center;">
       3 
     </div> 
     <div style="margin-left:0;text-align:center;">
       4 
     </div> 
     <div style="margin-left:0;text-align:center;">
       5 
     </div> 
     <div style="margin-left:0;text-align:center;">
       6 
     </div> 
     <div style="margin-left:0;text-align:center;">
       7 
     </div> 
     <div style="margin-left:0;text-align:center;">
       8 
     </div> 
     <div style="margin-left:0;text-align:center;">
       9 
     </div> 
     <div style="margin-left:0;text-align:center;">
       10 
     </div> 
     <div style="margin-left:0;text-align:center;">
       11 
     </div> 
     <div style="margin-left:0;text-align:center;">
       12 
     </div> 
     <div style="margin-left:0;text-align:center;">
       13 
     </div> 
     <div style="margin-left:0;text-align:center;">
       14 
     </div> 
     <div style="margin-left:0;text-align:center;">
       15 
     </div> 
     <div style="margin-left:0;text-align:center;">
       16 
     </div> 
     <div style="margin-left:0;text-align:center;">
       17 
     </div> 
     <div style="margin-left:0;text-align:center;">
       18 
     </div> 
     <div style="margin-left:0;text-align:center;">
       19 
     </div> 
     <div style="margin-left:0;text-align:center;">
       20 
     </div> 
     <div style="margin-left:0;text-align:center;">
       21 
     </div> 
     <div style="margin-left:0;text-align:center;">
       22 
     </div> 
     <div style="margin-left:0;text-align:center;">
       23 
     </div> 
     <div style="margin-left:0;text-align:center;">
       24 
     </div> 
     <div style="margin-left:0;text-align:center;">
       25 
     </div> 
     <div style="margin-left:0;text-align:center;">
       26 
     </div> 
     <div style="margin-left:0;text-align:center;">
       27 
     </div> 
     <div style="margin-left:0;text-align:center;">
       28 
     </div> 
     <div style="margin-left:0;text-align:center;">
       29 
     </div> 
     <div style="margin-left:0;text-align:center;">
       30 
     </div> 
     <div style="margin-left:0;text-align:center;">
       31 
     </div> 
     <div style="margin-left:0;text-align:center;">
       32 
     </div> 
     <div style="margin-left:0;text-align:center;">
       33 
     </div> 
     <div style="margin-left:0;text-align:center;">
       34 
     </div> 
     <div style="margin-left:0;text-align:center;">
       35 
     </div> 
     <div style="margin-left:0;text-align:center;">
       36 
     </div> 
     <div style="margin-left:0;text-align:center;">
       37 
     </div> 
    </div> </td> 
   <td style="text-align:left;vertical-align:top;width:667.203px;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:left;">
       .nth-table {  
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; border-collapse: collapse; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; border: 1px solid #824100; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; } 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;.nth-table tr:nth-child(odd){  
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: #9DCECE; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; } 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       .nth-table th{  
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; border: 1px dotted #FFA346; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; color: #3E5260; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; padding:12px; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; } 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       .nth-table td{  
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; border: 1px dashed #000; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; color: #002F5E; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; padding:12px; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; width:90px; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; } 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

#### **在 nth-child 选择器中使用偶数的演示** ####

在上面的 CSS 中只做了一些更改，并且在 tr 中使用 CSS nth-child 选择器中的偶数值而不是奇数。看看输出：

![016ca31317291c93f0ecce30c5d211c3.png][]

**[查看在线演示和代码][Link 2]**

**CSS：**

<table style="margin-left:0px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#333e53;text-align:left;vertical-align:top;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:center;">
       1 
     </div> 
     <div style="margin-left:0;text-align:center;">
       2 
     </div> 
     <div style="margin-left:0;text-align:center;">
       3 
     </div> 
     <div style="margin-left:0;text-align:center;">
       4 
     </div> 
     <div style="margin-left:0;text-align:center;">
       5 
     </div> 
     <div style="margin-left:0;text-align:center;">
       6 
     </div> 
     <div style="margin-left:0;text-align:center;">
       7 
     </div> 
     <div style="margin-left:0;text-align:center;">
       8 
     </div> 
     <div style="margin-left:0;text-align:center;">
       9 
     </div> 
     <div style="margin-left:0;text-align:center;">
       10 
     </div> 
     <div style="margin-left:0;text-align:center;">
       11 
     </div> 
     <div style="margin-left:0;text-align:center;">
       12 
     </div> 
     <div style="margin-left:0;text-align:center;">
       13 
     </div> 
     <div style="margin-left:0;text-align:center;">
       14 
     </div> 
     <div style="margin-left:0;text-align:center;">
       15 
     </div> 
     <div style="margin-left:0;text-align:center;">
       16 
     </div> 
     <div style="margin-left:0;text-align:center;">
       17 
     </div> 
     <div style="margin-left:0;text-align:center;">
       18 
     </div> 
     <div style="margin-left:0;text-align:center;">
       19 
     </div> 
     <div style="margin-left:0;text-align:center;">
       20 
     </div> 
     <div style="margin-left:0;text-align:center;">
       21 
     </div> 
     <div style="margin-left:0;text-align:center;">
       22 
     </div> 
     <div style="margin-left:0;text-align:center;">
       23 
     </div> 
     <div style="margin-left:0;text-align:center;">
       24 
     </div> 
     <div style="margin-left:0;text-align:center;">
       25 
     </div> 
     <div style="margin-left:0;text-align:center;">
       26 
     </div> 
     <div style="margin-left:0;text-align:center;">
       27 
     </div> 
     <div style="margin-left:0;text-align:center;">
       28 
     </div> 
     <div style="margin-left:0;text-align:center;">
       29 
     </div> 
     <div style="margin-left:0;text-align:center;">
       30 
     </div> 
     <div style="margin-left:0;text-align:center;">
       31 
     </div> 
     <div style="margin-left:0;text-align:center;">
       32 
     </div> 
     <div style="margin-left:0;text-align:center;">
       33 
     </div> 
     <div style="margin-left:0;text-align:center;">
       34 
     </div> 
     <div style="margin-left:0;text-align:center;">
       35 
     </div> 
     <div style="margin-left:0;text-align:center;">
       36 
     </div> 
     <div style="margin-left:0;text-align:center;">
       37 
     </div> 
     <div style="margin-left:0;text-align:center;">
       38 
     </div> 
     <div style="margin-left:0;text-align:center;">
       39 
     </div> 
    </div> </td> 
   <td style="text-align:left;vertical-align:top;width:667.203px;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:left;">
       .nth-table {  
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; border-collapse: collapse; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; border: 1px solid #400040; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; } 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;.nth-table tr:nth-child(even){  
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: #FFB0FF; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; } 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       .nth-table th{  
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; border: 1px dotted #460046; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; color: #000; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; padding:13px; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; background-color:#AFD8D8; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; } 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       .nth-table td{  
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; border: 1px dashed #000; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; color: #002F5E; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; padding:12px; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; width:90px; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; } 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

可以看到，第二行被分配了 nth-table tr:nth-child(even) 中指定的样式。然后，行号第四，第六等等。

#### **每隔三行设置不同样式的演示** ####

如前所述，您不仅可以使用奇数或偶数来区分交替行，还可以指定一个数字来区分每个第 2行、第3行、第 4行等。

为此，只需使用 nth-child 中的数字，例如，

> nth-table-number tr:nth-child(3n)

点击下面的图片或链接查看在线演示：

![db6ec732ccb71efa05f30d6965ee2fe1.png][]

**[查看在线演示和代码][Link 3]**

**本演示使用的 CSS：**

<table style="margin-left:0px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#333e53;text-align:left;vertical-align:top;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:center;">
       1 
     </div> 
     <div style="margin-left:0;text-align:center;">
       2 
     </div> 
     <div style="margin-left:0;text-align:center;">
       3 
     </div> 
     <div style="margin-left:0;text-align:center;">
       4 
     </div> 
     <div style="margin-left:0;text-align:center;">
       5 
     </div> 
     <div style="margin-left:0;text-align:center;">
       6 
     </div> 
     <div style="margin-left:0;text-align:center;">
       7 
     </div> 
     <div style="margin-left:0;text-align:center;">
       8 
     </div> 
     <div style="margin-left:0;text-align:center;">
       9 
     </div> 
     <div style="margin-left:0;text-align:center;">
       10 
     </div> 
     <div style="margin-left:0;text-align:center;">
       11 
     </div> 
     <div style="margin-left:0;text-align:center;">
       12 
     </div> 
     <div style="margin-left:0;text-align:center;">
       13 
     </div> 
     <div style="margin-left:0;text-align:center;">
       14 
     </div> 
     <div style="margin-left:0;text-align:center;">
       15 
     </div> 
     <div style="margin-left:0;text-align:center;">
       16 
     </div> 
     <div style="margin-left:0;text-align:center;">
       17 
     </div> 
     <div style="margin-left:0;text-align:center;">
       18 
     </div> 
     <div style="margin-left:0;text-align:center;">
       19 
     </div> 
     <div style="margin-left:0;text-align:center;">
       20 
     </div> 
     <div style="margin-left:0;text-align:center;">
       21 
     </div> 
     <div style="margin-left:0;text-align:center;">
       22 
     </div> 
     <div style="margin-left:0;text-align:center;">
       23 
     </div> 
     <div style="margin-left:0;text-align:center;">
       24 
     </div> 
     <div style="margin-left:0;text-align:center;">
       25 
     </div> 
     <div style="margin-left:0;text-align:center;">
       26 
     </div> 
     <div style="margin-left:0;text-align:center;">
       27 
     </div> 
     <div style="margin-left:0;text-align:center;">
       28 
     </div> 
     <div style="margin-left:0;text-align:center;">
       29 
     </div> 
     <div style="margin-left:0;text-align:center;">
       30 
     </div> 
     <div style="margin-left:0;text-align:center;">
       31 
     </div> 
     <div style="margin-left:0;text-align:center;">
       32 
     </div> 
     <div style="margin-left:0;text-align:center;">
       33 
     </div> 
     <div style="margin-left:0;text-align:center;">
       34 
     </div> 
     <div style="margin-left:0;text-align:center;">
       35 
     </div> 
     <div style="margin-left:0;text-align:center;">
       36 
     </div> 
     <div style="margin-left:0;text-align:center;">
       37 
     </div> 
     <div style="margin-left:0;text-align:center;">
       38 
     </div> 
     <div style="margin-left:0;text-align:center;">
       39 
     </div> 
     <div style="margin-left:0;text-align:center;">
       40 
     </div> 
     <div style="margin-left:0;text-align:center;">
       41 
     </div> 
     <div style="margin-left:0;text-align:center;">
       42 
     </div> 
     <div style="margin-left:0;text-align:center;">
       43 
     </div> 
    </div> </td> 
   <td style="text-align:left;vertical-align:top;width:667.203px;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:left;">
       nth-table-number {  
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; border-collapse: collapse; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; border: 1px solid #400040; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; } 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;.nth-table-number tr:nth-child(3n){  
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background: #DEF3CA; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; } 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       .nth-table-number th{  
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; border: 1px dotted #460046; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; color: #000; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; padding:13px; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; background-color:#86C442; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; border-radius:5px; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; } 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       .nth-table-number td{  
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; border: 1px dashed #000; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; color: #002F5E; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; padding:12px; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; width:90px; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; border-radius:50%; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp;&nbsp;&nbsp; text-align: center; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; 
     </div> 
     <div style="margin-left:0;text-align:left;">
       &nbsp; } 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

你可以看到，每三行被分配一个不同的样式。从演示页面获取完整代码。

#### **某些行后开始样式的演示** ####

您可能需要在一定数量的行之后在 HTML 表格中显示不同样式的行。例如，以相同的样式显示前五行，然后以不同的方式显示每个奇数行或偶数行。您可以按以下高级方式使用 nth-child 来实现此目的。

请参阅此演示，其中我在前四行之后开始以不同的方式设置奇数行（行数包括您可能以不同方式设置的表头）。

![5dcae01e818ccc509b99ba490ac476aa.png][]

**[查看在线演示和代码][Link 4]**

这是第 n 个子选择器的使用方式：

请参阅演示页面上的完整代码。

同样，您可以在 <td> 或其他元素中使用 nth-child 选择器来设置不同的样式。

[207dffff721cb0a2eaaf5f7d1900f816.png]: https://img-blog.csdnimg.cn/img_convert/207dffff721cb0a2eaaf5f7d1900f816.png
[Link 1]: https://www.jquery-az.com/wwh/demo.php?ex=27.0_1
[016ca31317291c93f0ecce30c5d211c3.png]: https://img-blog.csdnimg.cn/img_convert/016ca31317291c93f0ecce30c5d211c3.png
[Link 2]: https://www.jquery-az.com/wwh/demo.php?ex=27.0_2
[db6ec732ccb71efa05f30d6965ee2fe1.png]: https://img-blog.csdnimg.cn/img_convert/db6ec732ccb71efa05f30d6965ee2fe1.png
[Link 3]: https://www.jquery-az.com/wwh/demo.php?ex=27.0_3
[5dcae01e818ccc509b99ba490ac476aa.png]: https://img-blog.csdnimg.cn/img_convert/5dcae01e818ccc509b99ba490ac476aa.png
[Link 4]: https://www.jquery-az.com/wwh/demo.php?ex=27.0_4