如何使用 css 选择指定 tr 标记中的最后一个 td

Question

我正在制作一个活动公告板页面。 为我的个人主页使用 JSP、HTML/CSS5。

我想将仅最后一个 td 的边框底部颜色实现为紫色(除此之外，其他颜色是绿色的。

tr 标记被指定为类event_tr。

我该如何解决这个问题？

这是我到目前为止所拥有的：

CSS代码

.event_tr td {
border-bottom:1px solid green ;
padding-bottom: 5px;
}
.event_tr td:last-child  {
border-bottom:10px solid purple !important;
padding-bottom: 5px; 
}

HTML代码 此代码只是表中 tr 标记的一部分，这是由数据库重复的，JSP 的重复语法(while，for 等(。

<tr class="event_tr">
<td>
<a href="event_view.jsp?navcd=event&subnavcd=ONGOING!&num=6">
<img src="../images/event/juniel1.jpg"width="300" height="150" style="">
</a>
<ul>
<li style="padding-top: 10px;">
<a href="event_view.jsp?navcd=event&subnavcd=ONGOING!&num=6">
ALL FREE!
</a>
</li>
<li>
<a href="event_view.jsp?navcd=event&subnavcd=ONGOING!&num=6">
ALL FREE!
</a>
</li>
<li>
<a href="event_view.jsp?navcd=event&subnavcd=ONGOING!&num=6">
FROM 2017-08-11 TO ~ 2017-09-21 
</a>
</li>
</ul>
</td>
</tr>

问候

Answer 1

由于TD的所有文本内容都在a标签内，因此您可能应该解决该a标签：

.event_tr td:last-child a {
color: purple; 
}

Answer 2

如果我理解正确，您说您的 tr 标签在表中重复，那么您可能需要这个而不是您现在拥有的

table .event_tr td {
border-bottom:1px solid green;
padding-bottom:5px;
}
table .event_tr:last-child td {
border-bottom:10px solid purple;
padding-bottom:5px;
}

Answer 3

您应该处理tr标签而不是td。试试这个：

.event_tr:last-child td {
border-bottom:10px solid purple !important;
padding-bottom: 5px; 
}

Answer 4

它的工作方式是你写的，你只是忘了把整个东西放到一个table标签中，然后紫色边框出现：

.event_tr td {
border-bottom: 1px solid green;
padding-bottom: 5px;
}
.event_tr td:last-child {
border-bottom: 10px solid purple !important;
padding-bottom: 5px;
}

<table>
<tr class="event_tr">
<td>
<a href="event_view.jsp?navcd=event&subnavcd=ONGOING!&num=6">
<img src="../images/event/juniel1.jpg" width="300" height="150">
</a>
<ul>
<li style="padding-top: 10px;">
<a href="event_view.jsp?navcd=event&subnavcd=ONGOING!&num=6">
ALL FREE!
</a>
</li>
<li>
<a href="event_view.jsp?navcd=event&subnavcd=ONGOING!&num=6">
ALL FREE!
</a>
</li>
<li>
<a href="event_view.jsp?navcd=event&subnavcd=ONGOING!&num=6">
FROM 2017-08-11 TO ~ 2017-09-21 
</a>
</li>
</ul>
</td>
</tr>
</table>