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

我正在制作一个活动公告板页面。为我的个人主页使用JSP，HTML/CSS5。如何使用css选择指定tr标签中的最后一个td

我想只实现最后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>

关心，

来源

2017-08-14 hsw4840

不清楚你在问什么。你显示的表格行只有一个单元格，这也使得该单元格成为_last_子元素，而'.event_tr td：最后子元素'选择完全正确。 – CBroe

我很抱歉，谢谢您的反馈，这只是一个部分，而这是通过DataBase，JSP的While语法重复的。 – hsw4840

由于您TD的所有文字内容在里面a标签，你也许应该解决a标签：

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

来源

2017-08-14 10:22:27 Johannes

感谢您的反馈，但我不想添加标签，而是添加td标签的border-bottom属性。 – hsw4840

你应该称呼，而不是td的tr标签。试试这个：

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

来源

2017-08-14 10:30:14

border-bottom属性不起作用。我尝试将此更改为颜色，并且我确认它是应用标签中的内容无论如何，感谢您的反馈。 :) – hsw4840

如果我理解你正确，您说，您的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; 
}

来源

2017-08-14 10:34:21 codingsoul

border-bottom属性不起作用。我尝试将此更改为颜色，并且我确认它是应用标签中的内容无论如何，感谢您的反馈:)。 – hsw4840

不客气。 – codingsoul

它的工作方式这你写的，你只是忘了把整个事情变成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>

来源

2017-08-14 14:22:02 Johannes

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

回答

相关问题