如何定位表格前的H4元素？CSS与jQuery实现问题排查

原始HTML结构 #

<h4>Section title</h4>

<table>
    <tbody>
        <tr class="myrow">
        </tr>
    </tbody>
</table>

一、CSS :has()选择器无效的原因 #

你写的h4:has(+ .tr.myrow)有两处错误：

• 错误1：.tr是类选择器写法，但tr是HTML标签，没有类名tr，应该去掉前面的.，直接写tr；
• 错误2：+是相邻兄弟选择器，只能选中紧接在当前元素后的同级元素。h4的相邻兄弟是<table>，而tr是table的后代元素，不是h4的同级，所以不能直接用+连接h4和tr。

正确的选择器应该是：

h4:has(+ table tr.myrow) {
  /* 你的样式 */
}

这个选择器的逻辑是：选中所有后面紧跟着包含.myrow类tr的table的h4元素。

二、jQuery .prev()方法的使用问题 #

.prev()是可以堆叠使用的，但你的用法逻辑错误：
从tr.myrow出发，调用.prev()找的是它在<tbody>里的前一个同级元素（这里tr是tbody里的第一个元素，所以.prev()返回空），再调用.prev()还是空，自然无法隐藏h4。

正确的做法是先定位到tr的祖先<table>，再找table的前一个兄弟h4：

$('tr.myrow').closest('table').prev().hide();

• .closest('table')：从当前tr向上查找最近的table祖先元素；
• .prev()：找到table的前一个同级元素（也就是目标h4），再调用.hide()隐藏它。

内容的提问来源于stack exchange，提问作者user8012864