如何仅在特定类的首行表格行显示按钮?
问题:多日课程仅保留一个报名按钮(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; }
补充说明:
- 优先修正HTML中的语法错误(给class属性添加
=),否则CSS无法正确选中元素; - 使用
display: none替代visibility: hidden,前者会完全移除元素占位,避免布局出现空白; - 该选择器适用于多日课程行连续排列的场景,匹配你提供的HTML结构。
内容的提问来源于stack exchange,提问作者Thijmen van Doorn
相关产品推荐
相关产品推荐

