You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何仅在特定类的首行表格行显示按钮?

问题:多日课程仅保留一个报名按钮(CSS实现)

我有一个PHP动态生成的课程展示表格,每行都带有ButtonInschrijven报名按钮。但对于标记为meerdaagsecursus_sub2的多日课程行,希望只保留第一个按钮,隐藏后续的。由于无法修改PHP代码,只能通过CSS解决,现有HTML结构如下(注意:原HTML中meerdaagsecursus_sub2行的class属性存在语法错误,缺少=,需先修正):

<table class="events-table">
<tbody>
<tr class="cursus"><a class="ButtonInschrijven" href="http://">Inschrijven</a></tr>
<tr class="meerdaagsecursus_sub2"><a class="ButtonInschrijven" href="http://">Inschrijven</a></tr>
<tr class="meerdaagsecursus_sub2"><a class="ButtonInschrijven" href="http://">Inschrijven</a></tr>
<tr class="meerdaagsecursus_sub2"><a class="ButtonInschrijven" href="http://">Inschrijven</a></tr>
<tr class="cursus"><a class="ButtonInschrijven" href="http://">Inschrijven</a></tr>
</tbody>
</table>

我尝试了以下CSS但未生效:

.meerdaagsecursus_sub2:nth-child(1n+2) .ButtonInschrijven {
    visibility: hidden;
}

解决方案

原CSS失效的原因是:nth-child基于父元素(<tbody>)的所有子元素计数,而非仅同类别元素。正确做法是使用相邻兄弟选择器,仅选中紧跟在meerdaagsecursus_sub2行之后的同类别行,隐藏其中的按钮:

/* 隐藏多日课程行中除第一个外的所有报名按钮 */
.meerdaagsecursus_sub2 + .meerdaagsecursus_sub2 .ButtonInschrijven {
    display: none;
}

补充说明:

  1. 优先修正HTML中的语法错误(给class属性添加=),否则CSS无法正确选中元素;
  2. 使用display: none替代visibility: hidden,前者会完全移除元素占位,避免布局出现空白;
  3. 该选择器适用于多日课程行连续排列的场景,匹配你提供的HTML结构。

内容的提问来源于stack exchange,提问作者Thijmen van Doorn

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.18 23:30:55