我正在寻找下表的CSS选择器:
Peter | male | 34
Susanne | female | 12
是否有任何选择器来匹配所有包含“男性”的td ?
我正在寻找下表的CSS选择器:
Peter | male | 34
Susanne | female | 12
是否有任何选择器来匹配所有包含“男性”的td ?
当前回答
使用jQuery:
$('td:contains("male")')
其他回答
对于那些希望进行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];
}
如果有多个元素,它将返回第一个元素因为在我的例子中,它总是一个元素。
由于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/
这实际上是一个非常概念性的基础,为什么没有实施。它基本上是三个方面的结合:
元素的文本内容实际上是该元素的子元素 不能直接以文本内容为目标 CSS不允许选择器提升
这三个元素加在一起意味着,当您获得文本内容时,您不能升回包含的元素,也不能为当前文本设置样式。这可能很重要,因为降序只允许对上下文和SAX样式解析进行单一跟踪。升序选择器或其他涉及其他轴的选择器需要更复杂的遍历或类似的解决方案,这将极大地复杂化CSS到DOM的应用程序。
所有这些都是很好的答案,但我认为我可以添加一些在实际场景中对我有用的东西:利用CSS的aria-label属性。
对于那些不知道的读者:aria-label是一个属性,它与其他类似的属性一起使用,让屏幕阅读器知道什么是什么,以防有视力障碍的人在使用你的网站。许多网站将这些属性添加到包含图像或文本的元素中,作为“描述符”。
这使得它高度特定于网站,但如果你的元素包含这个,使用属性的内容选择该元素是相当简单的:
HTML:
<td aria-label="male">Male</td>
<td aria-label="female">Female</td>
CSS:
td[aria-label="male"] {
outline: 1px dotted green;
}
从技术上讲,这与使用数据属性解决方案是一样的,但如果你不是网站的作者,这也适用于你,而且这不是一些专门为支持此用例而设计的过时解决方案;它本身是相当常见的。它的一个缺点是,实际上不能保证您想要的元素将具有此属性。
@voyager关于使用data-*属性的回答(例如data-gender=“女性|男性”是2017年最有效且符合标准的方法:
[data-gender='male'] {background-color: #000; color: #ccc;}
大多数目标都可以实现,因为有一些尽管有限的选择器面向文本。first-letter是一个伪元素,它可以对元素的第一个字母应用有限的样式。还有一个::first-line伪元素,除了明显地选择元素(如段落)的第一行之外,还意味着很明显可以使用CSS来扩展这种现有功能,以设置textNode的特定方面的样式。
在这种主张成功并实现之前,我能建议的下一个最好的事情是使用空格分隔符爆炸/分割单词,在span元素中输出每个单独的单词,然后如果单词/样式目标是可预测的,则结合使用:n个选择器:
$p = explode(' ',$words);
foreach ($p as $key1 => $value1)
{
echo '<span>'.$value1.'</span>;
}
否则如果无法预测,再次使用voyager关于使用data-*属性的答案。一个使用PHP的例子:
$p = explode(' ',$words);
foreach ($p as $key1 => $value1)
{
echo '<span data-word="'.$value1.'">'.$value1.'</span>;
}