英文:
Add border to first row in a table with a specific class
问题
我想在具有类“relegated”的行上方放置一个红色边框。
我知道我需要在子级的<td>标签上应用边框，而不是在<tr>上应用边框。
我已经尝试过：
.relegated:nth-child(1) td {
border-top: 1px dashed red;
}
但我什么都没得到。执行以下代码：
tr:nth-child(7) td {
border-top: 1px dashed red;
}
确实有效。但我想根据类来选择目标（因为这是一个联赛积分榜，底部分区不能降级）。
英文:
I have the following table
<table>
<tr>
<td>1st</td>
<td>Anne Wright &amp; Steve Wright</td>
<td>510 VPs</td>
</tr>
<tr>
<td>2nd</td>
<td>Ian Bruce &amp; Lyn Hilton</td>
<td>472 VPs</td>
</tr>
<tr>
<td>3rd</td>
<td>Anne Morris &amp; Lucy Pathan</td>
<td>469 VPs</td>
</tr>
<tr>
<td>4th</td>
<td>Mike Ayers &amp; Mike Gould</td>
<td>426 VPs</td>
</tr>
<tr>
<td>5th</td>
<td>Alison Nichols &amp; Simon Stokes</td>
<td>409 VPs</td>
</tr>
<tr>
<td>6th</td>
<td>Brian Stockdale &amp; Sheila Stockdale</td>
<td>406 VPs</td>
</tr>
<tr class="relegated">
<td>7th</td>
<td>Pauline Dignan &amp; Val Rees</td>
<td>349 VPs</td>
</tr>
<tr class="relegated">
<td>8th</td>
<td>Alan Lord &amp; John Thompson</td>
<td>319 VPs</td>
</tr>
</table>
I want to put a red border above the row that has the class "relegated".
I know that I need to apply the border on the child <td> tags and not the <tr>
I have tried
.relegated:nth-child(1) td {
border-top: 1px dashed red;
}
but I get nothing. Doing
tr:nth-child(7) td {
border-top: 1px dashed red;
}
does work. But I want to target it based on the class (because this is a league table and you can't get relegated from the bottom division).
答案1
得分: 1
以下是您要翻译的内容：
tr:nth-child(1 of .relegated) td{
border-top: 1px dashed red;
}
<table id="table">
<tbody>
<tr>
<td>1st</td>
<td>Anne Wright & Steve Wright</td>
<td>510 VPs</td>
</tr>
<tr>
<td>2nd</td>
<td>Ian Bruce & Lyn Hilton</td>
<td>472 VPs</td>
</tr>
<tr>
<td>3rd</td>
<td>Anne Morris & Lucy Pathan</td>
<td>469 VPs</td>
</tr>
<tr>
<td>4th</td>
<td>Mike Ayers & Mike Gould</td>
<td>426 VPs</td>
</tr>
<tr>
<td>5th</td>
<td>Alison Nichols & Simon Stokes</td>
<td>409 VPs</td>
</tr>
<tr>
<td>6th</td>
<td>Brian Stockdale & Sheila Stockdale</td>
<td>406 VPs</td>
</tr>
<tr class="relegated">
<td>7th</td>
<td>Pauline Dignan & Val Rees</td>
<td>349 VPs</td>
</tr>
<tr class="relegated">
<td>8th</td>
<td>Alan Lord & John Thompson</td>
<td>319 VPs</td>
</tr>
</tbody>
</table>
英文:
use that.
:nth-child(1 of className)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
tr:nth-child(1 of .relegated) td{
border-top: 1px dashed red;
}
<!-- language: lang-html -->
<table id="table">
<tbody>
<tr>
<td>1st</td>
<td>Anne Wright &amp; Steve Wright</td>
<td>510 VPs</td>
</tr>
<tr>
<td>2nd</td>
<td>Ian Bruce &amp; Lyn Hilton</td>
<td>472 VPs</td>
</tr>
<tr>
<td>3rd</td>
<td>Anne Morris &amp; Lucy Pathan</td>
<td>469 VPs</td>
</tr>
<tr>
<td>4th</td>
<td>Mike Ayers &amp; Mike Gould</td>
<td>426 VPs</td>
</tr>
<tr>
<td>5th</td>
<td>Alison Nichols &amp; Simon Stokes</td>
<td>409 VPs</td>
</tr>
<tr>
<td>6th</td>
<td>Brian Stockdale &amp; Sheila Stockdale</td>
<td>406 VPs</td>
</tr>
<tr class="relegated">
<td>7th</td>
<td>Pauline Dignan &amp; Val Rees</td>
<td>349 VPs</td>
</tr>
<tr class="relegated">
<td>8th</td>
<td>Alan Lord &amp; John Thompson</td>
<td>319 VPs</td>
</tr>
</tbody>
</table>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论