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 CODES 这个代码只是表格中的tr标签的一部分，这是重复的数据库，JSP的重复语法（同时，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

由于道明的所有文字内容都在y=c(2.5,1,0,1.2,2,3,2,1,0,-2,-1,.5,2,3,6,5,7,9,11,15,23)个标记内，您可能应该使用a标记：

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>

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

4 个答案: