css选择器nth-child()和nth-of-type()的应用

 <style>
         .table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th {
             background-color: #f9f9f9;
         }
         /*  nth-child():规定属于其父元素的第二个子元素的每个p的背景色;
             nth-child(n):选择器匹配属于其父元素的第N个子元素,不论元素的类型,n可以使数字、关键词或表达式
             odd和even是可用于匹配下标是奇数或者偶数的子元素的关键词

             nth-of-type(n):选择器匹配属于父元素的特定类型的第N个子元素的每个元素,n可以使数字、关键词或表达式

             区别:nth-child(),该选择器选取父元素的第N个子元素，与类型无关
             */
     </style>

 <div style="margin-top: 100px;">
         <table class="table-striped">
             <tbody>
                 <tr>
                     <td>1</td>
                     <td>dafsdf</td>
                 </tr>
                 <tr>
                     <td>2</td>
                     <td>QQQQQQQQQ</td>
                 </tr>
                 <tr>
                     <td>3</td>
                     <td>sssssssssssss</td>
                 </tr>
                 <tr>
                     <td>4</td>
                     <td>zzzzzzzzzzzzz</td>
                 </tr>
             </tbody>
         </table>

     </div>