jan*_*mon 456 css css-selectors
我正在寻找下表的CSS选择器:
Peter | male | 34
Susanne | female | 12
是否有任何选择器匹配所有包含"男性"的TD？
Dea*_*n J 349
如果我正确阅读了规范,没有.
您可以匹配元素,元素中属性的名称以及元素中命名属性的值.但是,我没有看到任何元素内的匹配内容.
moe*_*ger 152
使用jQuery:
$('td:contains("male")')
小智 140
看起来他们正在考虑CSS3规范,但它并没有削减.
:contains()CSS3选择器http://www.w3.org/TR/css3-selectors/#content-selectors
Est*_*ber 110
你不得不数据属性添加到所谓的行data-gender用male或female值和使用属性选择:
HTML:
<td data-gender="male">...</td>
CSS:
td[data-gender="male"] { ... }
Mat*_*ple 63
实际上有一个非常概念性的基础,为什么没有实现这一点.它基本上是3个方面的组合:
这三个一起意味着,当您拥有文本内容时,您无法提升回包含元素,并且您无法设置当前文本的样式.这可能很重要,因为降序只允许单一跟踪上下文和SAX样式解析.涉及其他轴的升序或其他选择器引入了对更复杂的遍历或类似解决方案的需求,这将使CSS的应用极大地复杂化.
Buk*_*ksy 24
您可以将内容设置为数据属性,然后使用属性选择器,如下所示:
/* Select every cell containing word "male" */
td[data-content="male"] {
color: red;
}
/* Select every cell starting on "p" case insensitive */
td[data-content^="p" i] {
color: blue;
}
/* Select every cell containing "4" */
td[data-content*="4"] {
color: green;
}<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>您还可以使用jQuery轻松设置数据内容属性:
$(function(){
$("td").each(function(){
var $this = $(this);
$this.attr("data-content", $this.text());
});
});
由于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/
如果您不自己创建 DOM（例如在用户脚本中），您可以使用纯 JS 执行以下操作：
// Add a custom attribute 'text' to all td's, set their values to td.innerText:
for ( td of document.querySelectorAll('td') ) {
console.debug("text:", td, td.innerText)
td.setAttribute('text', td.innerText)
}
// Query for the custom attribute 'text' with a specific value:
for ( td of document.querySelectorAll('td[text="male"]') )
console.debug("male:", td, td.innerText)<table>
<tr>
<td>Peter</td>
<td>male</td>
<td>34</td>
</tr>
<tr>
<td>Susanne</td>
<td>female</td>
<td>12</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
对于那些希望进行 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];
}
如果有多个元素，这将返回第一个元素，因为在我的情况下它总是一个元素。
到处都有很好的答案，但我想我可以添加一些在实际场景中对我有用的东西：利用aria-labelCSS 的属性。
对于不知道的读者：aria-label是一个属性，与其他类似属性结合使用，让屏幕阅读器知道某些内容，以防有视觉障碍的人使用您的网站。许多网站将这些属性添加到包含图像或文本的元素中，作为“描述符”。
这使得它高度特定于网站，但如果您的元素包含此内容，则使用属性的内容选择该元素相当简单：
HTML：
<td aria-label="male">Male</td>
<td aria-label="female">Female</td>
CSS：
td[aria-label="male"] {
outline: 1px dotted green;
}
从技术上讲，这与使用数据属性解决方案是一样的，但如果您不是网站的作者，这对您有用，而且这不是专门为支持此目的而设计的一些偏僻的解决方案用例；它本身就很常见。它的一个缺点是，实际上无法保证您想要的元素将具有此属性。
如果您使用Chimp / Webdriver.io，它们支持的 CSS 选择器比 CSS 规范多得多。
例如，这将单击包含“Bad bear”一词的第一个锚点：
browser.click("a*=Bad Bear");