表nth-child不工作

时间:2018-01-22 13:22:45

标签: html css

尝试配置表以使所有偶数行具有相同的颜色,我将“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>

我已经检查了各种类似的问题,但找不到适用于我所遇到的这个问题...所有指针都将非常感激

3 个答案:

答案 0 :(得分:1)

您必须指定 nth-child

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

Documentation on nth-child()

对于备用行,您可以使用

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

答案 1 :(得分:0)

语法错误:nth-​​child。它应该是:nth-​​child(n),其中n表示第n个孩子。 以下是示例代码:

&#13;
&#13;
tr:nth-child(3)
{background:#CCC;}
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

对于偶数行,您可以尝试

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

您还可以通过给出子值(n)来为n:th child选择行:1,2,3

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