我正在寻找下表的CSS选择器:
Peter | male | 34
Susanne | female | 12
是否有任何选择器来匹配所有包含“男性”的td ?
当前回答
使用jQuery:
$('td:contains("male")')
其他回答
到2021年1月，有一些东西会做到这一点。:有()……只有一个问题:目前还没有任何浏览器支持这个功能
示例:下面的选择器只匹配直接包含子元素的元素:
a:has(> img)
引用:
https://developer.mozilla.org/en-US/docs/Web/CSS/:has
https://caniuse.com/?search=has
我发现属性选项是你最好的选择，如果你不想使用javascript或jquery。
例如，在HTML中，用ready来样式所有的表格单元格:
<td status*="ready">Ready</td>
然后在css中:
td[status*="ready"] {
color: red;
}
这个问题的语法看起来像Robot Framework语法。 在本例中，虽然没有用于contains的css选择器，但可以使用SeleniumLibrary关键字来代替。 Wait Until元素包含。
例子:
Wait Until Element Contains | ${element} | ${contains}
Wait Until Element Contains | td | male
如果你不自己创建DOM(例如在用户脚本中)，你可以用纯JS做以下事情:
(注:文件 console.debug(文本:“文本:”，t.d.， t.d.) td。setAttribute(“文本”,td innerText)。 的 (td . queryctorall) 控制台.debug(“male:”，t.d.， t.d.内文) < table > < tr > 彼得< td > < / td > < td >男< / td > 34 < / td > < td > < / tr > < tr > < td >苏珊< / td > < td >女性< / td > 12 < / td > < td > < / tr > - < table >
控制台输出
text: <td> Peter
text: <td> male
text: <td> 34
text: <td> Susanne
text: <td> female
text: <td> 12
male: <td text="male"> male
看起来他们是在考虑CSS3规范，但它没有被削减。
:contains() CSS3选择器http://www.w3.org/TR/css3-selectors/#content-selectors
