如何选择带指定类的首个子元素及表格中首个非隐藏的ts-wrap类td元素

需求一：选中带指定类的子元素中的第一个匹配项 #

这里分CSS和JS两种常用场景给出实现方式：

纯CSS实现 #

如果是要给这类元素加样式，直接用组合选择器就能搞定。假设父元素是.parent，目标子元素类是.target-class：

/* 选中父元素下第一个带.target-class的直接子元素 */
.parent > .target-class:first-of-type {
  /* 你的样式规则 */
}

要是子元素类型混杂（比如既有<div>又有<p>），想精准匹配第一个带类的元素，也可以用:nth-child()，不过注意它是基于兄弟元素位置的：

.parent .target-class:nth-child(n) {
  /* 第一个匹配的元素会被选中 */
}

JS/jQuery实现 #

用jQuery的话，一行代码就能拿到第一个匹配项：

const firstMatch = $('.parent .target-class').first();

原生JS更简单，querySelector本身就返回第一个匹配的元素：

const firstMatch = document.querySelector('.parent .target-class');

需求二：选中表格里第一个未隐藏的（带ts-wrap类的）<td> #

看你提供的表格结构，前两个<td>是隐藏的，第一个带ts-wrap的就是要选的目标。直接定位就行：

纯CSS实现 #

/* 给.ts-row下第一个ts-wrap的td加样式 */
.ts-row > .ts-wrap:first-of-type {
  text-decoration: underline; /* 示例样式 */
}

JS/jQuery实现 #

jQuery写法：

const targetTd = $('.ts-row .ts-wrap').first();
// 可以直接操作这个元素，比如高亮
targetTd.css('background-color', '#ffffcc');

原生JS写法：

const targetTd = document.querySelector('.ts-row .ts-wrap');
// 操作元素
targetTd.style.backgroundColor = '#ffffcc';

如果后续可能出现带ts-wrap但隐藏的情况，还可以加个可见性判断来确保选中的是显示的元素：

const allTsWrapTds = document.querySelectorAll('.ts-row .ts-wrap');
let firstVisibleTd;
for (const td of allTsWrapTds) {
  // offsetParent为null说明元素不可见
  if (td.offsetParent !== null) {
    firstVisibleTd = td;
    break;
  }
}

附上你的完整表格代码参考：

<table>
  <tr class="ts-row">
    <td style="display:none;">&nbsp;</td>
    <td style="display:none;">&nbsp;</td>
    <td style="text-align:right;" class="ts-wrap" colspan="2">Select Me</td>
    <td style="text-align:right;" class="ts-wrap" colspan="2"></td>
    <td style="text-align:right;" class="ts-wrap" colspan="2"></td>
  </tr>
</table>

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