CSS选择器（第一个，第一个孩子，第n个孩子）定位未在Javascript / Jquery中选择
我正在尝试使用CSS选择器在jQuery中定位几个td元素。
- 我需要第一个元素（td.calsun_days）作为添加“selectedWeekend”类的click事件的一部分。
- 我需要第二，第三，第四和第五个td元素在页面加载时向它们添加“notAllowed”类。
我遇到的问题是元素没有针对“notAllowed”类正确定位。它是星期二到星期六选择的，只有点击才能选择。 “selectedWeekend”类将在星期五/星期六点击时添加（仅当“notAllowed”代码不存在时），但不是星期日。我试过切换代码的顺序，但它没有任何影响。我尝试使用first-child，first，nth-child（1）和nth-child（2）进行定位。提前感谢您的帮助！
的jQuery
jQuery(document).ready(
function($) {
var element = $('#afterbig1 td.czr-focus td');
element.click(function() {
if ($(this).is(":nth-last-child(2)") || $(this).is(":last-child") || $(this).hasAttribute('class')) {
$(this).toggleClass("selectedWeekend");
}
});
if (element.is(":nth-child()") || element.is(":nth-child(2)") || element.is(":nth-child(3)") || element.is(":nth-child(4)")) {
element.addClass("notAllowed");
}
}); @media only screen and (max-width : 640px) {
#views_tabs ,#drop_down_views
{
display:none;
}
#views_tabs_select
{
display:block !important;
}
}
@media only screen and (max-width : 968px) {
#cats >li
{
float:none;
}
}
.spider_categories{
display:inline-block;
cursor:pointer;
}
.spider_categories p{
color: #fff;
padding: 2px 10px !important;
margin: 2px 0 !important;
font-size: 14px;
font-weight: 600;
}
#cats #category
{
text-decoration:underline;
cursor:pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bigcalendar1" class="wdc_calendar" style="width:196.078431372549%;">
<div id="afterbig1" style="" class="wdc_calendar">
<div style="width:100%;">
<table cellpadding="0" cellspacing="0" style="width:100%;">
<tbody><tr>
<td>
<div id="views_tabs" style=";width: 100%;">
<div class="views" style="" onclick="showbigcalendar('bigcalendar1', 'https://johnabounceandplay.com/wp-admin/admin-ajax.php?action=spiderbigcalendar_day&theme_id=13&calendar=12&select=month,week,day,&date=2017-11-23&many_sp_calendar=1&cat_id&widget=0&rand=1','1','0')"><span style="top: -3px; position: relative; color:#FFFFFF;font-size:13px">Day</span>
</div>
<div class="views" style="" onclick="showbigcalendar('bigcalendar1', 'https://johnabounceandplay.com/wp-admin/admin-ajax.php?action=spiderbigcalendar_week&theme_id=13&calendar=12&select=month,week,day,&months=10,11,12&date=2017-11-23&many_sp_calendar=1&cat_id&widget=0&rand=1','1','0')"><span style="top: -3px; position: relative; color:#FFFFFF;font-size:13px">Week</span>
</div>
<div class="views" style="display:none;" onclick="showbigcalendar('bigcalendar1', 'https://johnabounceandplay.com/wp-admin/admin-ajax.php?action=spiderbigcalendar_list&theme_id=13&calendar=12&select=month,week,day,&date=2017-11&many_sp_calendar=1&cat_id&widget=0&rand=1','1','0')"><span style="top: -3px; position: relative; color:#FFFFFF;font-size:13px">List</span>
</div>
<div class="views" style="background-color:#005478 !important;top:0;" onclick="showbigcalendar('bigcalendar1', 'https://johnabounceandplay.com/wp-admin/admin-ajax.php?action=spiderbigcalendar_month&theme_id=13&calendar=12&select=month,week,day,&date=2017-11&many_sp_calendar=1&cat_id&widget=0&rand=1','1','0')"><span style="color:#FFFFFF;font-size:13px">Month</span>
</div>
</div>
<div id="views_tabs_select" style="display:none">
<div id="views_select" style="background-color:#005478 !important;color:#FFFFFF !important;font-size:13px">
Month<div class="arrow-right show_arrow"></div>
<div class="arrow-down"></div>
</div>
<ul id="drop_down_views" style="float: left;top: inherit;left: -20px;margin-top: 0px;">
<li style="">
<div class="views_select" onclick="showbigcalendar('bigcalendar1', 'https://johnabounceandplay.com/wp-admin/admin-ajax.php?action=spiderbigcalendar_day&theme_id=13&calendar=12&select=month,week,day,&date=2017-11-23&many_sp_calendar=1&cat_id&widget=0','1','0')">
<span style="position:relative;top:25%;color:#FFFFFF;font-size:13px">Day</span>
</div>
</li>
<li style=""><div class="views_select" onclick="showbigcalendar('bigcalendar1', 'https://johnabounceandplay.com/wp-admin/admin-ajax.php?action=spiderbigcalendar_week&theme_id=13&calendar=12&select=month,week,day,&months=10,11,12&date=2017-11-23&many_sp_calendar=1&cat_id&widget=0','1','0')">
<span style="position:relative;top:25%;color:#FFFFFF;font-size:13px">Week</span>
</div>
</li>
<li style="display:none;"><div class="views_select" onclick="showbigcalendar('bigcalendar1', 'https://johnabounceandplay.com/wp-admin/admin-ajax.php?action=spiderbigcalendar_list&theme_id=13&calendar=12&select=month,week,day,&date=2017-11&many_sp_calendar=1&cat_id&widget=0','1','0')">
<span style="position:relative;top:25%;color:#FFFFFF;font-size:13px">List</span>
</div>
</li>
<li class="active" style=""><div class="views_select" onclick="showbigcalendar('bigcalendar1', 'https://johnabounceandplay.com/wp-admin/admin-ajax.php?action=spiderbigcalendar_month&theme_id=13&calendar=12&select=month,week,day,&date=2017-11&many_sp_calendar=1&cat_id&widget=0','1','0')">
<span style="position:relative;top:25%;color:#FFFFFF;font-size:13px">Month</span></div></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="general_table" style="border-spacing:0; width:100%;border:#005478 solid 0px; margin:0; padding:0;background-color:#F8F8F8 !important;">
<tbody><tr>
<td width="100%" style="padding:0; margin:0;" class="czr-focus">
<table cellpadding="0" cellspacing="0" border="0" style="border-spacing:0; font-size:12px; margin:0; padding:0; width:100%;">
<tbody><tr style="height:40px; width:100%;">
<td class="top_table" align="center" colspan="7" style="position: relative;padding:0; margin:0; background-color:#005478;height:20px; background-repeat: no-repeat;background-size: 100% 100%; border: 0 !important;">
<table cellpadding="0" cellspacing="0" border="0" align="center" class="calyear_table" style="margin:0; padding:0; text-align:center; width:100%; height:90px;">
<tbody><tr>
<td width="10%">
<div onclick="javascript:showbigcalendar('bigcalendar1','https://johnabounceandplay.com/wp-admin/admin-ajax.php?action=spiderbigcalendar_month&theme_id=13&calendar=12&select=month,week,day,&date=2016-11&many_sp_calendar=1&cat_id&widget=0','1','0')" style="text-align:center; cursor:pointer; width:100%; background-color: rgba(1,121,156,0.4);;">
<span style="font-size:18px;color:#FFF">2016</span>
</div>
</td>
<td class="cala_arrow" width="11%" style="text-align:right;margin:0px; padding: 0px 30px 0px 0px;">
<a style="text-shadow: 1px 1px 2px black;color:#CCD1D2;" href="javascript:showbigcalendar('bigcalendar1','https://johnabounceandplay.com/wp-admin/admin-ajax.php?action=spiderbigcalendar_month&theme_id=13&calendar=12&select=month,week,day,&date=2017-10&many_sp_calendar=1&cat_id&widget=0','1','0')">❰
</a>
</td>
<td style="text-align:center; margin:0;" width="10%">
<input type="hidden" name="month" readonly="" value="November">
<span style="line-height: 30px;font-family: Segoe UI; color:#F9F2F4; font-size:25px;text-shadow: 1px 1px black;">November 2017 </span>
</td>
<td style="margin:0; padding: 0px 0px 0px 30px;text-align:left" width="11%" class="cala_arrow">
<a style="text-shadow: 1px 1px 2px black; color:#CCD1D2" href="javascript:showbigcalendar('bigcalendar1','https://johnabounceandplay.com/wp-admin/admin-ajax.php?action=spiderbigcalendar_month&theme_id=13&calendar=12&select=month,week,day,&date=2017-12&many_sp_calendar=1&cat_id&widget=0','1','0')">❱
</a>
</td>
<td width="10%" style="border: 0 !important;">
<div onclick="javascript:showbigcalendar('bigcalendar1','https://johnabounceandplay.com/wp-admin/admin-ajax.php?action=spiderbigcalendar_month&theme_id=13&calendar=12&select=month,week,day,&date=2018-11&many_sp_calendar=1&cat_id&widget=0','1','0')" style="text-align:center; cursor:pointer; width:100%; background-color: rgba(1,121,156,0.4);;">
<span style="font-size:18px;color:#FFF">2018</span>
</div>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr align="center" height="30" style="background-color:#006285 !important;">
<td class="weekdays" style="width:14.2857143%; color:#CCD1D2; margin:0; padding:0;background-color:#006285 !important">
<div class="calbottom_border" style="text-align:center; margin:0; padding:0;"><b class="week_days">Su </b></div>
</td>
<td class="weekdays" style="width:14.2857143%; color:#CCD1D2; margin:0; padding:0">
<div class="calbottom_border" style="text-align:center; margin:0; padding:0;"><b class="week_days">Mo </b></div>
</td>
<td class="weekdays" style="width:14.2857143%; color:#CCD1D2; margin:0; padding:0">
<div class="calbottom_border" style="text-align:center; margin:0; padding:0;"><b class="week_days">Tu </b></div>
</td>
<td class="weekdays" style="width:14.2857143%; color:#CCD1D2; margin:0; padding:0">
<div class="calbottom_border" style="text-align:center; margin:0; padding:0;"><b class="week_days">We </b></div>
</td>
<td class="weekdays" style="width:14.2857143%; color:#CCD1D2; margin:0; padding:0">
<div class="calbottom_border" style="text-align:center;margin:0; padding:0;"><b class="week_days">Th </b></div>
</td>
<td class="weekdays" style="width:14.2857143%; color:#CCD1D2; margin:0; padding:0">
<div class="calbottom_border" style="text-align:center;margin:0; padding:0;"><b class="week_days">Fr </b></div>
</td>
<td class="weekdays" style="width:14.2857143%; color:#CCD1D2; margin:0; padding:0">
<div class="calbottom_border" style="text-align:center; margin:0; padding:0;"><b class="week_days">Sa </b></div>
</td>
</tr>
<tr id="days" height="90" style="line-height:15px;"> <td class="caltext_color_other_months" style="background-color:#F8F8F8 !important">
<p style="padding-right: 7px; font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI;padding-left: 5px;background: #CCD1D2 !important; width: 100%; padding-right: 6px;">29</p>
</td> <td class="caltext_color_other_months" style="background-color:#F8F8F8 !important">
<p style="padding-right: 7px; font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI;padding-left: 5px;background: #CCD1D2 !important; width: 100%; padding-right: 6px;">30</p>
</td> <td class="caltext_color_other_months" style="background-color:#F8F8F8 !important">
<p style="padding-right: 7px; font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI;padding-left: 5px;background: #CCD1D2 !important; width: 100%; padding-right: 6px;">31</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">1</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">2</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">3</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">4</p>
</td> </tr>
<tr height="90" style="line-height:15px"> <td class="calsun_days" style="padding:0; margin:0;line-height:1.4;font-family: Segoe UI; font-size:17px">
<p style="background: #CCD1D2 ; padding-left: 5px; padding-right: 6px; ">5</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">6</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">7</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">8</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">9</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;" class="selectedWeekend">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">10</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;" class="selectedWeekend">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">11</p>
</td> </tr>
<tr height="90" style="line-height:15px"> <td class="calsun_days" style="padding:0; margin:0;line-height:1.4;font-family: Segoe UI; font-size:17px">
<p style="background: #CCD1D2 ; padding-left: 5px; padding-right: 6px; ">12</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">13</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">14</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">15</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">16</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">17</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">18</p>
</td> </tr>
<tr height="90" style="line-height:15px"> <td class="calsun_days" style="padding:0; margin:0;line-height:1.4;font-family: Segoe UI; font-size:17px">
<p style="background: #CCD1D2 ; padding-left: 5px; padding-right: 6px; ">19</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">20</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">21</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">22</p>
</td> <td style="overflow: hidden; color:#004B6C;padding:0; margin:0; line-height:15px; border: 2px solid #005478 !important; vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI;padding-left: 5px; background: #CCD1D2 ;">23</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">24</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">25</p>
</td> </tr>
<tr height="90" style="line-height:15px"> <td class="calsun_days" style="padding:0; margin:0;line-height:1.4;font-family: Segoe UI; font-size:17px">
<p style="background: #CCD1D2 ; padding-left: 5px; padding-right: 6px; ">26</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">27</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">28</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">29</p>
</td> <td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">30</p>
</td> <td class="caltext_color_other_months" style="font-size:17px;line-height:1.4;font-family: Segoe UI;font-weight: 600;background-color:#F8F8F8 !important;"><p style="background: #CCD1D2 ;"><span style="padding: 0px 19px 0px 5px;">1</span></p></td> <td class="caltext_color_other_months" style="font-size:17px;line-height:1.4; font-weight: 600;font-family: Segoe UI; background-color:#F8F8F8 !important;"><p style="background: #CCD1D2 ;"><span style="padding: 0px 19px 0px 5px;">2</span></p></td> </tr>
</tbody></table> <input type="text" value="1" name="day" style="display:none" class="czr-focusable">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<ul id="cats" style="list-style-type:none; padding: 0;">
<li class="spider_categories"><p id="category5" style="background-color:#f26823 !important" onclick="showbigcalendar('bigcalendar1', 'https://johnabounceandplay.com/wp-admin/admin-ajax.php?action=spiderbigcalendar_month&theme_id=13&calendar=12&select=month,week,day,&date=2017-11&many_sp_calendar=1&cat_id=5&cat_ids&widget=0','1','0')"> 10AM-10:30PM</p></li>
<li class="spider_categories"><p id="category6" style="background-color:#fecd0b !important" onclick="showbigcalendar('bigcalendar1', 'https://johnabounceandplay.com/wp-admin/admin-ajax.php?action=spiderbigcalendar_month&theme_id=13&calendar=12&select=month,week,day,&date=2017-11&many_sp_calendar=1&cat_id=6&cat_ids&widget=0','1','0')"> 10AM-5PM</p></li>
<li class="spider_categories"><p id="category7" style="background-color:#99ca3d !important" onclick="showbigcalendar('bigcalendar1', 'https://johnabounceandplay.com/wp-admin/admin-ajax.php?action=spiderbigcalendar_month&theme_id=13&calendar=12&select=month,week,day,&date=2017-11&many_sp_calendar=1&cat_id=7&cat_ids&widget=0','1','0')"> 7PM-10:30PM</p></li>
<li class="spider_categories"><p id="category0" style="background-color:#005478 !important" onclick="showbigcalendar('bigcalendar1', 'https://johnabounceandplay.com/wp-admin/admin-ajax.php?action=spiderbigcalendar_month&theme_id=13&calendar=12&select=month,week,day,&date=2017-11&many_sp_calendar=1&cat_id&cat_ids&widget=0','1','0')">All categories</p></li>
</ul>
</div></div></div>
2 个答案:
答案 0 :(得分：3)
WordPress表的更新
添加了演示2 ，这是对此特定WordPress模板的特定表的修复。有关更加通用和理智的答案，请参阅下面的演示1 。
90％的元素都有内联样式。
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;
border-bottom: 1px solid #CCD1D2 !important;
border-left: 1px solid #CCD1D2 !important; vertical-align:top;">
</td>
<!--Do not copy this-->
- 样式表，类和
.css()无法通过常规方式更改的属性-
color: #004B6C; -
padding: 0; -
margin: 0; -
line-height: 15px; -
vertical-align: top
-
如果您希望通过外部样式表或<style>块更改这些属性，则需要使用!important。
-
!important无法覆盖这些属性-
border-bottom: 1px solid #CCD1D2 !important; -
border-left: 1px solid #CCD1D2 !important;
-
更改内联样式的唯一方法是使用纯JavaScript直接访问它们。
-
通过纯JavaScript更改
style属性-
财产：
style-
签名：元素。样式 .propertyName =＆＃34; propertyValue＆＃34;
-
示例：
document.querySelector('td').style.borderBottom="3px dashed red" - 注意：仅一个元素和一个属性/值
-
-
方法：
setAttribute()- 签名：元素。 setAttribute（＆＃39; propertName＆＃39;，＆＃39; propertyValue＆＃39;）
- 示例：
document.getElementsByTagName('td')[0].setAttribute('style', 'border-bottom: 3px dashed red') - 注意：一个元素多个属性/值，但原始文件将被覆盖
-
属性：
cssText- 签名：元素。 style.cssText =＆＃34; propertyName：propertyValue＆＃34;
- 示例：
$('td')[0].style.cssText = 'border-bottom: 3px dashed red';
-
在演示1 星期五，星期六和星期日列中有.selectedWeekend类以及突出显示单元格的附加功能。其余列具有.notAllowed类。
.notAllowed的选择器：
$('tbody tr td:nth-child(n+2):nth-child(-n+5)')
选择器：查找<tbody>，然后通过每个<tr>查找位于第二列内的所有＆lt; td> （nth-child(n+2)）到第五列（nth-child(-n+5)）
.selectedWeekend的选择器：
$('tbody tr td').not('.notAllowed');
确定.notAllowed列后，我们可以使用not()
在演示中评论的详细信息
演示1 - 对于非嵌套的有效表（很可能不在CMS或WordPress站点上）
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$(function() {
/* Selector: Get all <td> inside <tbody> that is on
|| the second, third, fourth, and fifth
*/
var NA = $('tbody tr td:nth-child(n+2):nth-child(-n+5)');
NA.addClass('notAllowed');
/* Selector: Get all <td> that DO NOT have the class .notAllowed
|| Delegate the .on() method and invoke callback highlight()
*/
$('tbody tr td').not('.notAllowed').addClass('selectedWeekend');
$('.selectedWeekend').on('click', highlight);
// Toggles background and style of a cell
function highlight(e) {
if ($(this).css('background-color') !== 'cyan') {
$(this).toggleClass('highlight');
}
}
});table {
table-layout: fixed;
border-collapse: collapse;
border: 3px ridge grey;
}
td,
th {
border: 1px solid #000
}
th {
background: goldenrod;
text-align: center;
width: 150px
}
.selectedWeekend::before {
content: attr(class);
cursor: pointer;
pointer-events: auto
}
.notAllowed::before {
content: attr(class);
}
.highlight {
background-color: cyan;
border: 2px solid blue
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title></title>
<style>
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>SUNDAY</th>
<th>MONDAY</th>
<th>TUESDAY</th>
<th>WEDNESDAY</th>
<th>THURSDAY</th>
<th>FRIDAY</th>
<th>SATURDAY</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>
演示2 - 如果表位于CMS或WordPress站点
＆＃13;
＆＃13;
＆＃13;
＆＃13;
//[Get all <p> in the <td>]
/* Collect all <p> that are the only-child of
|| a <td> and the <td> a decsendant of a <tr>
|| into a NodeList then convert into an array
*/
var days = Array.from(document.querySelectorAll('tr td p:only-child'));
//[Set all <td> and <p> inline styles]
/* Run days array through .forEach()
|| on each loop:
|||Change the inline style of each <p> of days[]
|||Change the inline style of each <td> parent of <p>
|| *Note:* See post re: inline styles
*/
days.forEach(function(day, idx, days) {
days[idx].style.cssText = "font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI;padding-left: 5px;background: cyan; width: 98%; position:absolute;";
days[idx].parentNode.style.cssText = "color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2; border-left: 1px solid #CCD1D2;vertical-align:top;background:goldenrod;position:relative;";
});
//[Mark all .excluded cells]
/* Get all <p> that are the only child of a <td> which
|| is a 2nd, 3rd, 4th, or 5th decsendant of a <tr>
||| On each <p> find its parent <td> and add
|| .excluded class
*/
$('tr td:nth-of-type(n+2):nth-of-type(-n+5) p:only-child').each(function(index, wDay) {
$(this).parent('td').addClass('excluded');
});
//[Mark each header .selected or .excluded]
/* On each td.weekdays (the headers) use .map()
|| to do the following:
||| Add .normal and .selected classes to the
|| first, sixth, and seventh <td> as well as
||| adding data-day attributes to them.
||| Add .excluded class to the rest
*/
$('td.weekdays').map(function(col, day) {
if (col === 0 || col === 5 || col === 6) {
$(this).addClass('selected normal');
switch (col) {
case 0:
$(this).data('day', 'SUN');
break;
case 5:
$(this).data('day', 'FRI');
break;
case 6:
$(this).data('day', 'SAT');
break;
}
} else {
$(this).addClass('excluded');
}
});
//[Mark all of the remaining cells .selected.normal]
/* Go through each <p> parent <td> that do NOT
|| have the .excluded class and add .selected and
|| .normal class to them.
||| Because this template is overtly complex and
|| bad design, this table is inside a <td> so
|| td.czr-focus does not need those classes
*/
$(days).parents('td').not('.excluded').each(function(index, wEnd) {
$(this).addClass('selected normal');
$('.czr-focus').removeClass('selected normal');
});
//[Mark the cells for Sunday, Friday, and Saturday]
/* .map() out each td.selected and add
|| .SUN, .FRI, or .SAT classes according to its
|| index position within $('td.selected')
*/
$('td.selected').map(function(idx, wEnd) {
if ((idx + 3) % 3 === 0 && idx < 18) {
$(this).addClass('SUN');
} else if ([4, 7, 10, 13, 16, 19].includes(idx + 3)) {
$(this).addClass('FRI');
} else if ([5, 8, 11, 14, 17, 20].includes(idx + 3)) {
$(this).addClass('SAT');
} else {
return false;
}
});
//[Highlight a cell or column]
/* Delegate a click event on all td.selected
||| When clicked toggle the classes .highlight
|| and .normal.
||| Declare DAY as this <td>'s particular
|| value of its data-day attribute
||| if this <td> has class .weekdays and
|| .highlight, get all <td> that has the class
|| that matches data-day attribute value of
|| the clicked header (i.e. td.weekdays) and
|| add .highlight and remove .normal to all of
|| them.
||| if this is a header in default (i.e.
|| td.weekdays.selected.normal) do the reverse
*/
$('td.selected').on('click', function() {
$(this).toggleClass('highlight normal');
var DAY = $(this).data('day');
if ($(this).is('.weekdays.highlight')) {
$(`.${DAY}`).addClass('highlight').removeClass('normal');
} else if ($(this).is('.weekdays.normal')) {
$(`.${DAY}`).removeClass('highlight').addClass('normal');
} else {
return false;
}
});/* This makes all <td> display classList */
td::after {
content: '['attr(class)']';
color: red;
font-size: 7px;
}
.weekdays,
.selected {
cursor: pointer;
pointer-events: auto;
}
.highlight {
background: lime !important;
border-color: magenta !important;
outline: 4px solid magenta;
}
.normal {
background: initial;
border-color: initial;
outline: none;
}<table cellpadding="0" cellspacing="0" class="general_table" style="border-spacing:0; width:100%;border:#005478 solid 0px; margin:0; padding:0;background-color:#F8F8F8">
<tbody>
<tr>
<td width="100%" style="padding:0; margin:0;" class="czr-focus">
<table cellpadding="0" cellspacing="0" border="0" style="border-spacing:0; font-size:12px; margin:0; padding:0; width:100%;">
<tbody>
<tr style="height:40px; width:100%;">
<td class="top_table" align="center" colspan="7" style="position: relative;padding:0; margin:0; background-color:#005478;height:20px; background-repeat: no-repeat;background-size: 100% 100%; border: 0 !important;">
<table cellpadding="0" cellspacing="0" border="0" align="center" class="calyear_table" style="margin:0; padding:0; text-align:center; width:100%; height:90px;">
<tbody>
<tr>
<td width="10%">
<div onclick="javascript:showbigcalendar('bigcalendar1','https://johnabounceandplay.com/wp-admin/admin-ajax.php?action=spiderbigcalendar_month&theme_id=13&calendar=12&select=month,week,day,&date=2016-11&many_sp_calendar=1&cat_id&widget=0','1','0')"
style="text-align:center; cursor:pointer; width:100%; background-color: rgba(1,121,156,0.4);;">
<span style="font-size:18px;color:#FFF">2016</span>
</div>
</td>
<td class="cala_arrow" width="11%" style="text-align:right;margin:0px; padding: 0px 30px 0px 0px;">
<a style="text-shadow: 1px 1px 2px black;color:#CCD1D2;" href="javascript:showbigcalendar('bigcalendar1','https://johnabounceandplay.com/wp-admin/admin-ajax.php?action=spiderbigcalendar_month&theme_id=13&calendar=12&select=month,week,day,&date=2017-10&many_sp_calendar=1&cat_id&widget=0','1','0')">❰
</a>
</td>
<td style="text-align:center; margin:0;" width="10%">
<input type="hidden" name="month" readonly="" value="November">
<span style="line-height: 30px;font-family: Segoe UI; color:#F9F2F4; font-size:25px;text-shadow: 1px 1px black;">November 2017 </span>
</td>
<td style="margin:0; padding: 0px 0px 0px 30px;text-align:left" width="11%" class="cala_arrow">
<a style="text-shadow: 1px 1px 2px black; color:#CCD1D2" href="javascript:showbigcalendar('bigcalendar1','https://johnabounceandplay.com/wp-admin/admin-ajax.php?action=spiderbigcalendar_month&theme_id=13&calendar=12&select=month,week,day,&date=2017-12&many_sp_calendar=1&cat_id&widget=0','1','0')">❱
</a>
</td>
<td width="10%" style="border: 0 !important;">
<div onclick="javascript:showbigcalendar('bigcalendar1','https://johnabounceandplay.com/wp-admin/admin-ajax.php?action=spiderbigcalendar_month&theme_id=13&calendar=12&select=month,week,day,&date=2018-11&many_sp_calendar=1&cat_id&widget=0','1','0')"
style="text-align:center; cursor:pointer; width:100%; background-color: rgba(1,121,156,0.4);;">
<span style="font-size:18px;color:#FFF">2018</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr align="center" height="30" style="background-color:#006285 !important;">
<td class="weekdays" style="width:14.2857143%; color:#CCD1D2; margin:0; padding:0;background-color:#006285 !important">
<div class="calbottom_border" style="text-align:center; margin:0; padding:0;"><b class="week_days">Su </b></div>
</td>
<td class="weekdays" style="width:14.2857143%; color:#CCD1D2; margin:0; padding:0">
<div class="calbottom_border" style="text-align:center; margin:0; padding:0;"><b class="week_days">Mo </b></div>
</td>
<td class="weekdays" style="width:14.2857143%; color:#CCD1D2; margin:0; padding:0">
<div class="calbottom_border" style="text-align:center; margin:0; padding:0;"><b class="week_days">Tu </b></div>
</td>
<td class="weekdays" style="width:14.2857143%; color:#CCD1D2; margin:0; padding:0">
<div class="calbottom_border" style="text-align:center; margin:0; padding:0;"><b class="week_days">We </b></div>
</td>
<td class="weekdays" style="width:14.2857143%; color:#CCD1D2; margin:0; padding:0">
<div class="calbottom_border" style="text-align:center;margin:0; padding:0;"><b class="week_days">Th </b></div>
</td>
<td class="weekdays" style="width:14.2857143%; color:#CCD1D2; margin:0; padding:0">
<div class="calbottom_border" style="text-align:center;margin:0; padding:0;"><b class="week_days">Fr </b></div>
</td>
<td class="weekdays" style="width:14.2857143%; color:#CCD1D2; margin:0; padding:0">
<div class="calbottom_border" style="text-align:center; margin:0; padding:0;"><b class="week_days">Sa </b></div>
</td>
</tr>
<tr id="days" height="90" style="line-height:15px;">
<td class="caltext_color_other_months" style="background-color:#F8F8F8 !important">
<p style="padding-right: 7px; font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI;padding-left: 5px;background: #CCD1D2 !important; width: 100%; padding-right: 6px;">29</p>
</td>
<td class="caltext_color_other_months" style="background-color:#F8F8F8 !important">
<p style="padding-right: 7px; font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI;padding-left: 5px;background: #CCD1D2 !important; width: 100%; padding-right: 6px;">30</p>
</td>
<td class="caltext_color_other_months" style="background-color:#F8F8F8 !important">
<p style="padding-right: 7px; font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI;padding-left: 5px;background: #CCD1D2 !important; width: 100%; padding-right: 6px;">31</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">1</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">2</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">3</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">4</p>
</td>
</tr>
<tr height="90" style="line-height:15px">
<td class="calsun_days" style="padding:0; margin:0;line-height:1.4;font-family: Segoe UI; font-size:17px">
<p style="background: #CCD1D2 ; padding-left: 5px; padding-right: 6px; ">5</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">6</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">7</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">8</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">9</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;" class="selectedWeekend">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">10</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;" class="selectedWeekend">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">11</p>
</td>
</tr>
<tr height="90" style="line-height:15px">
<td class="calsun_days" style="padding:0; margin:0;line-height:1.4;font-family: Segoe UI; font-size:17px">
<p style="background: #CCD1D2 ; padding-left: 5px; padding-right: 6px; ">12</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">13</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">14</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">15</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">16</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">17</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">18</p>
</td>
</tr>
<tr height="90" style="line-height:15px">
<td class="calsun_days" style="padding:0; margin:0;line-height:1.4;font-family: Segoe UI; font-size:17px">
<p style="background: #CCD1D2 ; padding-left: 5px; padding-right: 6px; ">19</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">20</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">21</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">22</p>
</td>
<td style="overflow: hidden; color:#004B6C;padding:0; margin:0; line-height:15px; border: 2px solid #005478 !important; vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI;padding-left: 5px; background: #CCD1D2 ;">23</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">24</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">25</p>
</td>
</tr>
<tr height="90" style="line-height:15px">
<td class="calsun_days" style="padding:0; margin:0;line-height:1.4;font-family: Segoe UI; font-size:17px">
<p style="background: #CCD1D2 ; padding-left: 5px; padding-right: 6px; ">26</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">27</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">28</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">29</p>
</td>
<td style=" color:#004B6C;padding:0; margin:0; line-height:15px;border-bottom: 1px solid #CCD1D2 !important; border-left: 1px solid #CCD1D2 !important;vertical-align:top;">
<p style="font-size:17px; font-weight: 600;line-height:1.4;font-family: Segoe UI; padding-left: 5px; background: #CCD1D2 ;">30</p>
</td>
<td class="caltext_color_other_months" style="font-size:17px;line-height:1.4;font-family: Segoe UI;font-weight: 600;background-color:#F8F8F8 !important;">
<p style="background: #CCD1D2 ;"><span style="padding: 0px 19px 0px 5px;">1</span></p>
</td>
<td class="caltext_color_other_months" style="font-size:17px;line-height:1.4; font-weight: 600;font-family: Segoe UI; background-color:#F8F8F8 !important;">
<p style="background: #CCD1D2 ;"><span style="padding: 0px 19px 0px 5px;">2</span></p>
</td>
</tr>
</tbody>
</table> <input type="text" value="1" name="day" style="display:none" class="czr-focusable">
</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
答案 1 :(得分：1)
你有一个你需要的选择器的例子：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$('td:first-child, td:nth-last-child(-n+2)').css('background','red');
$('td:nth-child(n+2):nth-child(-n+5)').css('background','blue');td {
width: 25px;
height: 25px;
border: 1px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？