如何在JEVENTS插件中编码CSS来支持更改周六和周日的文本颜色为红色文本?
如何在Jevents插件中编码CSS来支持更改周六和周日的文本颜色,以更改红色文本(更改4-5、11-12、18-19和25-26,更改为红色文本)?
真实的Mini-Calendar jevents映像的示例 link 。
例如CSS编码为例。
.saturday > a.mod_events_daylink:link {
color: red;
font-weight: 900;
}
.saturday > a.mod_events_daylink:visited {
color: red;
font-weight: 900;
}
.sunday > a.mod_events_daylink:link {
color: red;
font-weight: 900;
}
.sunday > a.mod_events_daylink:visited {
color: red;
font-weight: 900;
}
但是不能将周六和周日的文本颜色更改为红色文字(将4-5、11-12、18-19和25-26更改为红色文字)。
完整的示例代码。
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
.mod_events_td_daywithevents > a.mod_events_daylink:link {
color: red;
font-weight: 900;
}
.mod_events_td_daywithevents > a.mod_events_daylink:visited {
color: red;
font-weight: 900;
}
.saturday > a.mod_events_daylink:link {
color: red;
font-weight: 900;
}
.saturday > a.mod_events_daylink:visited {
color: red;
font-weight: 900;
}
.sunday > a.mod_events_daylink:link {
color: red;
font-weight: 900;
}
.sunday > a.mod_events_daylink:visited {
color: red;
font-weight: 900;
}
</style>
</head>
<body>
<table style="width:250px;height:;" align="center" class="mod_events_table" cellspacing="0" cellpadding="2">
<tbody><tr class="mod_events_dayname">
<td class="mod_events_td_dayname"><span class="sunday">S</span></td>
<td class="mod_events_td_dayname">M</td>
<td class="mod_events_td_dayname">T</td>
<td class="mod_events_td_dayname">W</td>
<td class="mod_events_td_dayname">T</td>
<td class="mod_events_td_dayname">F</td>
<td class="mod_events_td_dayname"><span class="saturday">S</span></td>
</tr>
<tr>
<td class="mod_events_td_dayoutofmonth">29</td>
<td class="mod_events_td_dayoutofmonth">30</td>
<td class="mod_events_td_dayoutofmonth">31</td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/01/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">1</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/02/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">2</a></td>
<td class="mod_events_td_daywithevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/03/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">3</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/04/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">4</a></td>
</tr>
<tr>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/05/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">5</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/06/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">6</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/07/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">7</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/08/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">8</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/09/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">9</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/10/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">10</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/11/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">11</a></td>
</tr>
<tr>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/12/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">12</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/13/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">13</a></td>
<td class="mod_events_td_todaynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/14/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">14</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/15/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">15</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/16/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">16</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/17/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">17</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/18/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">18</a></td>
</tr>
<tr>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/19/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">19</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/20/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">20</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/21/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">21</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/22/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">22</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/23/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">23</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/24/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">24</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/25/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">25</a></td>
</tr>
<tr>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/26/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">26</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/27/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">27</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/28/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">28</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/29/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">29</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/30/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">30</a></td>
<td class="mod_events_td_dayoutofmonth">1</td>
<td class="mod_events_td_dayoutofmonth">2</td>
</tr>
</tbody></table>
</body>
</html>
示例代码图像的输出 link 。
我已经在Jevents插件中编码CSS,以支持更改周六和周日的文本颜色,以想象 link << /a>。
How to coding CSS in jEvents plugin to support change text color of Saturday and Sunday day to red text (change 4-5 , 11-12 , 18-19 and 25-26 to red text) ?
Example of real mini-calendar jEvents image link.
Becuase CSS coding to example.
.saturday > a.mod_events_daylink:link {
color: red;
font-weight: 900;
}
.saturday > a.mod_events_daylink:visited {
color: red;
font-weight: 900;
}
.sunday > a.mod_events_daylink:link {
color: red;
font-weight: 900;
}
.sunday > a.mod_events_daylink:visited {
color: red;
font-weight: 900;
}
but cannot to change text color of Saturday and Sunday day to red text (change 4-5 , 11-12 , 18-19 and 25-26 to red text).
Full sample code.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
.mod_events_td_daywithevents > a.mod_events_daylink:link {
color: red;
font-weight: 900;
}
.mod_events_td_daywithevents > a.mod_events_daylink:visited {
color: red;
font-weight: 900;
}
.saturday > a.mod_events_daylink:link {
color: red;
font-weight: 900;
}
.saturday > a.mod_events_daylink:visited {
color: red;
font-weight: 900;
}
.sunday > a.mod_events_daylink:link {
color: red;
font-weight: 900;
}
.sunday > a.mod_events_daylink:visited {
color: red;
font-weight: 900;
}
</style>
</head>
<body>
<table style="width:250px;height:;" align="center" class="mod_events_table" cellspacing="0" cellpadding="2">
<tbody><tr class="mod_events_dayname">
<td class="mod_events_td_dayname"><span class="sunday">S</span></td>
<td class="mod_events_td_dayname">M</td>
<td class="mod_events_td_dayname">T</td>
<td class="mod_events_td_dayname">W</td>
<td class="mod_events_td_dayname">T</td>
<td class="mod_events_td_dayname">F</td>
<td class="mod_events_td_dayname"><span class="saturday">S</span></td>
</tr>
<tr>
<td class="mod_events_td_dayoutofmonth">29</td>
<td class="mod_events_td_dayoutofmonth">30</td>
<td class="mod_events_td_dayoutofmonth">31</td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/01/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">1</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/02/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">2</a></td>
<td class="mod_events_td_daywithevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/03/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">3</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/04/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">4</a></td>
</tr>
<tr>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/05/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">5</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/06/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">6</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/07/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">7</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/08/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">8</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/09/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">9</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/10/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">10</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/11/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">11</a></td>
</tr>
<tr>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/12/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">12</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/13/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">13</a></td>
<td class="mod_events_td_todaynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/14/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">14</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/15/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">15</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/16/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">16</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/17/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">17</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/18/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">18</a></td>
</tr>
<tr>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/19/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">19</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/20/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">20</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/21/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">21</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/22/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">22</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/23/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">23</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/24/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">24</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/25/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">25</a></td>
</tr>
<tr>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/26/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">26</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/27/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">27</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/28/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">28</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/29/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">29</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/30/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">30</a></td>
<td class="mod_events_td_dayoutofmonth">1</td>
<td class="mod_events_td_dayoutofmonth">2</td>
</tr>
</tbody></table>
</body>
</html>
Output of sample code image link.
I have coded CSS in jEvents plugin to support change text color of Saturday and Sunday day to red text with imagination link.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
尝试使用
:First-Child
和:Last-Child
Try using
:first-child
and:last-child