我正在寻找下表的CSS选择器:
Peter | male | 34
Susanne | female | 12
是否有任何选择器来匹配所有包含“男性”的td ?
我正在寻找下表的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/