如何使用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

回答

相關問題