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>