html - 表 nth-child 不工作

Question

试图配置一个表格，使所有偶数行都具有相同的颜色，我将“tr nth-child”设置为#CCC，但不知何故，我没有选择行，而是只选择了交替的列。这是我的代码:

tr :nth-child:{
background:#CCC
}

<table class="fold-table table" align="center">
                <thead>
                <tr style="background: #1b4156; color: #FFFFFF; border-bottom: 1px; border-bottom-color: #000000">
                    <th>Data</th>
                    <th>Able to post this </th>
                    <th>Frequency</th>
                    <th>Access</th>
                </tr>
                </thead>
                <tbody>
                <tr class="view">
                    <td class="lab">Transactions</td>
                    <td>
                        <span>
                            <input type="radio" id="sales-radio1-yes" value="yes" name="sales-radio1" class="radio-custom col-md-6" data-rule-required="true"/>
                            <label id="data_avail1" for="sales-radio1-yes" class="radio-custom-label col-md-4" style="display: inline-block;">
                            Yes
                        </label>

                        </span>
                        <span>
                            <input type="radio" id="sales-radio1-no"  value="no"  name="sales-radio1" class="radio-custom col-md-6" data-rule-required="true"/>
                        <label id="data_avail2" for="sales-radio1-no"  class="radio-custom-label col-md-4" style="display: inline-block;">
                            No
                        </label>
                        </span>
                        <span>

                        <input type="radio" id="sales-radio1-not-sure" name="sales-radio1" value="not-sure" class="radio-custom col-md-6" data-rule-required="true"/>
                        <label id="data_avail3" for="sales-radio1-not-sure" class="radio-custom-label " style="display: inline-block;">
                            Not Sure
                        </label>

                        </span>
                    </td>
                    <td>
                        <select class="se_form" title="selector">
                            <option value="selone">Select One</option>
                            <option value="realtime">Real Time</option>
                            <option value="daily">Daily</option>
                            <option value="weekly">Weekly</option>
                            <option value="bi-Weekly">Bi-Weekly</option>
                            <option value="monthly">Monthly</option>
                            <option value="quarterly">Quarterly</option>
                            <option value="annually">Annually</option>
                        </select>
                    </td>
                    <td>
                        <select class="se_form2 data-access-select" title="selector2">
                            <option value="selone2">Select One</option>
                            <option value="ftp">FTP Download</option>
                            <option value="excel">Excel</option>
                            <option value="idb">Internal Database</option>
                            <option value="external_log">External Login</option>
                        </select>
                    </td>
                </tr>
                <tr>
                <tr class="view">
                    <td class="lab">Marketing / Media Plan</td>
                    <td>
                        <span>
                            <input type="radio" id="marketing-radio1-yes" value="yes" name="marketing-radio2" class="radio-custom col-md-6" data-rule-required="true"/>
                            <label id="data_avail4" for="marketing-radio1-yes" class="radio-custom-label col-md-4" style="display: inline-block;">
                            Yes
                        </label>

                        </span>
                        <span>
                            <input type="radio" id="marketing-radio1-no"  value="no"  name="radio2" class="radio-custom col-md-6" data-rule-required="true"/>
                        <label id="data_avail5" for="marketing-radio1-no"  class="radio-custom-label col-md-4" style="display: inline-block;">
                            No
                        </label>
                        </span>
                        <span>

                        <input type="radio" id="marketing-radio1-not-sure" name="radio2" value="not-sure" class="radio-custom col-md-6" data-rule-required="true"/>
                        <label id="data_avail6" for="marketing-radio1-not-sure" class="radio-custom-label " style="display: inline-block;">
                            Not Sure
                        </label>

                        </span>
                    </td>
                    <td>
                        <select class="se_form" title="selector">
                            <option value="selone">Select One</option>
                            <option value="realtime">Real Time</option>
                            <option value="daily">Daily</option>
                            <option value="weekly">Weekly</option>
                            <option value="bi-Weekly">Bi-Weekly</option>
                            <option value="monthly">Monthly</option>
                            <option value="quarterly">Quarterly</option>
                            <option value="annually">Annually</option>
                        </select>
                    </td>
                    <td>
                        <select class="se_form2 data-access-select" title="selector2">
                            <option value="selone2">Select One</option>
                            <option value="ftp">FTP Download</option>
                            <option value="excel">Excel</option>
                            <option value="idb">Internal Database</option>
                            <option value="external_log">External Login</option>
                        </select>
                    </td>
                </tr>
                <tr class="view">
                    <td class="lab">Channel</td>
                    <td>
                        <span>
                            <input type="radio" id="sales-channel-radio1-yes" value="'yes" name="sales-channel-radio1" class="radio-custom col-md-6" name="radio" data-rule-required="true"/>
                            <label id="data_avail7" for="sales-channel-radio1-yes" class="radio-custom-label col-md-4" style="display: inline-block;">
                            Yes
                        </label>

                        </span>
                        <span>
                            <input type="radio" id="sales-channel-radio1-no"  value="no"  name="sales-channel-radio1" class="radio-custom col-md-6" name="radio" data-rule-required="true"/>
                        <label id="data_avail8" for="sales-channel-radio1-no"  class="radio-custom-label col-md-4" style="display: inline-block;">
                            No
                        </label>
                        </span>
                        <span>

                        <input type="radio" id="sales-channel-radio1-not-sure" name="sales-channel-radio1" value="not-sure" class="radio-custom col-md-6" name="radio" data-rule-required="true"/>
                        <label id="data_avail9" for="sales-channel-radio1-not-sure" class="radio-custom-label " style="display: inline-block;">
                            Not Sure
                        </label>

                        </span>
                    </td>
                    <td>
                        <select class="se_form" title="selector">
                            <option value="selone">Select One</option>
                            <option value="realtime">Real Time</option>
                            <option value="daily">Daily</option>
                            <option value="weekly">Weekly</option>
                            <option value="bi-Weekly">Bi-Weekly</option>
                            <option value="monthly">Monthly</option>
                            <option value="quarterly">Quarterly</option>
                            <option value="annually">Annually</option>
                        </select>
                    </td>
                    <td>
                        <select class="se_form2 data-access-select" title="selector2">
                            <option value="selone2">Select One</option>
                            <option value="ftp">FTP Download</option>
                            <option value="excel">Excel</option>
                            <option value="idb">Internal Database</option>
                            <option value="external_log">External Login</option>
                        </select>
                    </td>
                </tr>
                <tr class="view">
                    <td class="lab">Delivery</td>
                    <td>
                        <span>
                            <input type="radio" id="media-radio1-yes" value="'yes" name="media-radio1" class="radio-custom col-md-6" name="radio" data-rule-required="true"/>
                            <label id="data_avail10" for="media-radio1-yes" class="radio-custom-label col-md-4" style="display: inline-block;">
                            Yes
                        </label>

                        </span>
                        <span>
                            <input type="radio" id="media-radio1-no"  value="no"  name="media-radio1" class="radio-custom col-md-6" name="radio" data-rule-required="true"/>
                        <label id="data_avail12" for="media-radio1-no"  class="radio-custom-label col-md-4" style="display: inline-block;">
                            No
                        </label>
                        </span>
                        <span>

                        <input type="radio" id="media-radio1-not-sure" name="media-radio1" value="not-sure" class="radio-custom col-md-6" name="radio" data-rule-required="true"/>
                        <label id="data_avail13" for="media-radio1-not-sure" class="radio-custom-label " style="display: inline-block;">
                            Not Sure
                        </label>

                        </span>
                    </td>
                    <td>
                        <select class="se_form" title="selector">
                            <option value="selone">Select One</option>
                            <option value="realtime">Real Time</option>
                            <option value="daily">Daily</option>
                            <option value="weekly">Weekly</option>
                            <option value="bi-Weekly">Bi-Weekly</option>
                            <option value="monthly">Monthly</option>
                            <option value="quarterly">Quarterly</option>
                            <option value="annually">Annually</option>
                        </select>
                    </td>
                    <td>
                        <select class="se_form2 data-access-select" title="selector2">
                            <option value="selone2">Select One</option>
                            <option value="ftp">FTP Download</option>
                            <option value="excel">Excel</option>
                            <option value="idb">Internal Database</option>
                            <option value="external_log">External Login</option>
                        </select>
                    </td>
                </tr>
                <tr class="view">
                    <td class="lab">Activity</td>
                    <td>
                        <span>
                            <input type="radio" id="promotional-radio1-yes" value="'yes" name="promotional-radio1" class="radio-custom col-md-6" name="radio" data-rule-required="true"/>
                            <label id="data_avail14" for="promotional-radio1-yes" class="radio-custom-label col-md-4" style="display: inline-block;">
                            Yes
                        </label>

                        </span>
                        <span>
                            <input type="radio" id="promotional-radio1-no"  value="no"  name="promotional-radio1" class="radio-custom col-md-6" name="radio" data-rule-required="true"/>
                        <label id="data_avail15" for="promotional-radio1-no"  class="radio-custom-label col-md-4" style="display: inline-block;">
                            No
                        </label>
                        </span>
                        <span>

                        <input type="radio" id="promotional-radio1-not-sure" name="promotional-radio1" value="not-sure" class="radio-custom col-md-6" name="radio" data-rule-required="true"/>
                        <label id="data_avail16" for="promotional-radio1-not-sure" class="radio-custom-label " style="display: inline-block;">
                            Not Sure
                        </label>

                        </span>
                    </td>
                    <td>
                        <select class="se_form" title="selector">
                            <option value="selone">Select One</option>
                            <option value="realtime">Real Time</option>
                            <option value="daily">Daily</option>
                            <option value="weekly">Weekly</option>
                            <option value="bi-Weekly">Bi-Weekly</option>
                            <option value="monthly">Monthly</option>
                            <option value="quarterly">Quarterly</option>
                            <option value="annually">Annually</option>
                        </select>
                    </td>
                    <td>
                        <select class="se_form2 data-access-select" title="selector2">
                            <option value="selone2">Select One</option>
                            <option value="ftp">FTP Download</option>
                            <option value="excel">Excel</option>
                            <option value="idb">Internal Database</option>
                            <option value="external_log">External Login</option>
                        </select>
                    </td>
                </tr>
                <tr class="view">

</tbody>
</table>

我已经检查了各种类似的问题，但找不到适用于我遇到的这个问题的问题...非常感谢所有指示

Answer 1

你必须指定哪个第n个 child

tr:nth-child(3) {
    background: #CCC
}

Documentation on nth-child()

---

对于交替行，您可以使用

tr:nth-child(odd|even) {
    background: #CCC
}