如何设置字段样式，哪个 div id 未知

Question

我想设置表中归档数据的样式，但其div id未知/不可用，无法写入。 这是页面源代码：

<tbody>
    <tr>        
        <td style="font-size:12px; text-align:center;" name="">
            <div style="padding:0; margin:0;">Ford</div>
            <div style="display:none; padding:0; margin:0;"></div>
        </td>
        <td style="font-size:12px; text-align:center;" name="">
            <div style="padding:0; margin:0;">Crown Victoria</div>
            <div style="display:none; padding:0; margin:0;"></div>
        </td>
        <td style="font-size:12px; text-align:center;" name="">
            <div style="padding:0; margin:0;">1234JESS123456789</div>
            <div style="display:none; padding:0; margin:0;"></div>
        </td>
    </tr>
</table>

我必须在最后一个 td 上应用以下 JavaScript。

<div id="output">ABC123DDD8877</div>
$('#output').html(($('#output').html()).replace(/[0-9]/gi, '<strong style="font-size:20pt">$&</strong>')) 

谁能帮我？

Answer 1

你可以

这样尝试：

如果您希望所有div 都设置样式，请尝试以下操作：

table td div{
    //Style here
}

在这里演示

如果您不想设置所有divs样式，而只想设置第一个div的样式，请尝试如下：

table td div:first-child{
   // your style
}

小提琴演示

Answer 2

尝试通过 CSS 选择它：

tbody tr td div {
    ...
}

Answer 3

如果你知道它是哪个div，你可以对第一个孩子或最后一个孩子做一些事情。 这是关于它的上一篇文章。如何连续选择第一个和最后一个TD？

Answer 4

有一种方法可以做到这一点，但我建议你不要这样做。负责任的方法是找到一种方法来向父元素（ID 或类）添加钩子。

如果你觉得你没有其他办法，那么...您必须使用属性选择器：

td div[style]{
  color:blue;
  }
td div[style*="display"]{
  color:red;
  }

在示例 1 中，您以包含 style 属性的div 为目标。

在示例 2 中，您通过存在 style 属性来定位元素，并查询该style属性是否包含值display - 因为在您的示例中，这是两个style属性之间的唯一区别。

从本质上讲，您是通过定位元素的内联样式来设置元素样式的。怪物就是这样诞生的，所以请另辟蹊径。