是否有包含特定文本的元素的CSSselect器？
我正在寻找下表的CSSselect器：
Peter | male | 34 Susanne | female | 12 有没有select匹配所有包含“男性”的TD？
如果我正确阅读说明书 ，不。
您可以匹配元素，元素中属性的名称以及元素中指定属性的值。 虽然我没有看到任何匹配内容的内容。
使用jQuery：
$('td:contains("male")')
看起来他们正在考虑为CSS3规范，但它并没有削减。
:contains() CSS3select器http://www.w3.org/TR/css3-selectors/#content-selectors
您必须将数据属性添加到具有male或female值的称为data-gender的行，并使用属性select器：
HTML：
<td data-gender="male">...</td>
CSS：
td[data-gender="male"] { ... }
实际上还有一个非常概念的基础，为什么没有实施。 基本上是三个方面的结合：
- 元素的文本内容实际上是该元素的子元素
- 您不能直接定位文字内容
- CSS不允许用select器来提升
这三个词意味着当你有文本内容时，你不能回到包含的元素，你不能devise现在的文字。 这可能是重要的，因为降序只允许对上下文和SAX样式parsing进行单独跟踪。 包含其他轴的升序或其他select器引入了更复杂的遍历或类似解决scheme的需求，这将使CSS在DOM上的应用大大复杂化。
您可以将内容设置为数据属性，然后使用属性select器
/* 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>
由于CSS缺乏这个function，您将不得不使用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"; }
恐怕这是不可能的，因为内容没有属性，也不能通过伪类访问。 CSS3select器的完整列表可以在CSS3规范中find。
对于那些正在寻找Selenium CSS文本select的人来说，这个脚本可能有些用处。
诀窍是select您正在查找的元素的父级，然后search具有该文本的子级：
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]; }
这将返回第一个元素，如果有多个，因为它总是一个元素，就我而言。
@ voyager关于使用data-*属性（例如data-gender="female|male" ）的答案是截至2017年最有效且符合标准的方法：
[data-gender='male'] {background-color: #000; color: #ccc;}
尽pipe只有有限的文本select器，但是大多数目标都可以达到。 :: first-letter是一个伪元素 ，可以将有限的样式应用于元素的第一个字母。 除了显式地select元素的第一行（比如段落）之外，还有一个:: first-line伪元素，这也意味着CSS显然可以用来扩展这个现有的function来设置textNode的特定方面。
直到这样的倡导成功，并实施下一个最好的事情，我可以build议，当适用的是explode / split单词使用空格分隔符，输出每个单词内部span元素，然后如果单词/样式目标是可预测的结合使用：第n个select器 ：
$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>; }
