我正在寻找下表的CSS选择器:

Peter    | male    | 34
Susanne  | female  | 12

是否有任何选择器来匹配所有包含“男性”的td ?


当前回答

如果你不自己创建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

对于那些希望进行Selenium CSS文本选择的人来说,这个脚本可能会有一些用处。

诀窍是选择你正在寻找的元素的父元素,然后搜索含有文本的子元素:

public static IWebElement FindByText(this IWebDriver driver, string text)
{
    var list = driver.FindElement(By.CssSelector("#RiskAddressList"));
    var element = ((IJavaScriptExecutor)driver).ExecuteScript(string.Format(" var x = $(arguments[0]).find(\":contains('{0}')\"); return x;", text), list);
    return ((System.Collections.ObjectModel.ReadOnlyCollection<IWebElement>)element)[0];
}

如果有多个元素,它将返回第一个元素因为在我的例子中,它总是一个元素。

到2021年1月,有一些东西会做到这一点。:有()……只有一个问题:目前还没有任何浏览器支持这个功能

示例:下面的选择器只匹配直接包含子元素的元素:

a:has(> img)

引用:

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

https://caniuse.com/?search=has

这里的大多数答案都试图提供如何编写HTML代码以包含更多数据的替代方案,因为至少到CSS3为止,您不能通过部分内部文本选择元素。但这是可以做到的,你只需要添加一点普通的JavaScript,注意因为female也包含了male,它会被选中:

细胞=文件 控制台日志(细胞); forEach[]。呼叫(细胞、功能) 如果(el.innerText.indexOf) ! - el。click ();点击或其他选择 控制台日志(el)。 的 }); < table > < tr > 彼得< td > < / td > < td >男< / td > 34 < / td > < td > < / tr > < tr > < td >苏珊< / td > < td >女性< / td > 14 < / td > < td > < / tr > - < table >

<table>
  <tr>
    <td data-content="Peter">Peter</td>
    <td data-content="male">male</td>
    <td data-content="34">34</td>
  </tr>
  <tr>
    <td data-conten="Susanne">Susanne</td>
    <td data-content="female">female</td>
    <td data-content="14">14</td>
  </tr>
</table>

由于CSS缺乏这一特性,您将不得不使用JavaScript按内容设置单元格样式。例如,XPath的包含:

var elms = document.evaluate( "//td[contains(., 'male')]", node, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null )

然后像这样使用结果:

for ( var i=0 ; i < elms.snapshotLength; i++ ){
   elms.snapshotItem(i).style.background = "pink";
}

https://jsfiddle.net/gaby_de_wilde/o7bka7Ls/9/