尝试配置表以使所有偶数行具有相同的颜色,我将“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>
我已经检查了各种类似的问题,但找不到适用于我所遇到的这个问题...所有指针都将非常感激
答案 0 :(得分:1)
您必须指定 nth-child
tr:nth-child(3) {
background: #CCC
}
对于备用行,您可以使用
tr:nth-child(odd|even) {
background: #CCC
}
答案 1 :(得分:0)
语法错误:nth-child。它应该是:nth-child(n),其中n表示第n个孩子。 以下是示例代码:
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;
答案 2 :(得分:0)
对于偶数行,您可以尝试
tr:nth-child(even) {
background: #CCC
}
您还可以通过给出子值(n)来为n:th child选择行:1,2,3
tr:nth-child(n) {
background: #CCC
}