增加带有特定文本的 TD 之后的 TD 的宽度？答案

【问题标题】：increasing the Width for a TD that comes after a TD with specific text?增加带有特定文本的 TD 之后的 TD 的宽度？
【发布时间】：2015-11-06 17:27:15
【问题描述】：

我有以下标记：-

现在我想使用 CSS 选择器将宽度从 850 最大化到 900。但我想指定我想要扩展的 TD 应该匹配以下内容：-

位于具有 class= ms-formtable 的表内
在 TR 内
在 <nobr> 标记内带有“描述”一词的 TD 之后。

请问有人可以推荐一下吗？

【问题讨论】：

css 选择器可能无济于事。它们用于相当于“通过”树枝的线性路径。查询并行/兄弟节点并不容易。
@MarcB 感谢您的回复，那么我需要遵循什么方法？使用 jquery 选择器？
如果您可以将td 的内容放入data 属性中（比如data-td-contents="description"，那么您可以使用td[data-td-contents="description"] + td 作为选择器。但这非常具体，即使更改大写字母会使规则无效。不是很推荐，但可能。
这是第三方应用程序，我无法修改标记本身以作为数据属性。我只能针对内置标记编写自定义 css 和脚本...

标签： jquery html css jquery-selectors css-selectors

【解决方案1】：

如果您可以像这样将td 的内容转换为data attribute：

<td data-td-content="Description">Description</td>

那么你可以使用

td[data-td-contents="description"] + td

作为 CSS 选择器。但这是如此具体，以至于即使更改大写字母也会使规则无效。不是很推荐，但可能。它还使您要传递和处理的数据量加倍，使页面大小加倍。不理想。

您也可以为此使用 jQuery，使用 :contains() 选择器。您可以执行以下操作：

$("td:contains('Description') + td")

这将返回包含文本值的td 之后的元素，然后您可以使用这些元素。这是 sn-p 中的一个示例，表明它有效：

$("td:contains('description') + td").addClass('selected')

.selected {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<table>
  <tr>
    <td>title</td>
    <td>My Title</td>
  </tr>
  <tr>
    <td>description</td>
    <td>My Description</td>
  </tr>
 </table>

当然，这也需要您访问脚本。否则没有直接的方法来选择这样的东西。

文档：https://api.jquery.com/contains-selector/

【讨论】：

感谢您的大力帮助.. 但为了避免影响无关的 TD。我如何指定我正在检查其“：contain（Descriptions）”的TD应该在一个class= .ms-formtable的表中，否则不应选择TD..？
在此之前将其添加到选择器中即可。所以：.ms-formtable td:contains('Description') + td