如果我没看错说明书的话，没有。

您可以在元素上匹配元素中属性的名称和元素中命名属性的值。但是，我没有看到任何用于匹配元素中的内容的东西。

恐怕这是不可能的，因为内容没有属性，也不能通过伪类访问。CSS3选择器的完整列表可以在CSS3规范中找到。

你必须添加一个名为data-gender的数据属性，带一个男性或女性值，并使用属性选择器:

HTML:

<td data-gender="male">...</td>

CSS:

td[data-gender="male"] { ... }

看起来他们是在考虑CSS3规范，但它没有被削减。

:contains() CSS3选择器http://www.w3.org/TR/css3-selectors/#content-selectors

使用jQuery:

$('td:contains("male")')

这实际上是一个非常概念性的基础，为什么没有实施。它基本上是三个方面的结合:

元素的文本内容实际上是该元素的子元素 不能直接以文本内容为目标 CSS不允许选择器提升

这三个元素加在一起意味着，当您获得文本内容时，您不能升回包含的元素，也不能为当前文本设置样式。这可能很重要，因为降序只允许对上下文和SAX样式解析进行单一跟踪。升序选择器或其他涉及其他轴的选择器需要更复杂的遍历或类似的解决方案，这将极大地复杂化CSS到DOM的应用程序。

对于那些希望进行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/

你可以将内容设置为数据属性，然后使用属性选择器，如下所示:

/* Select every cell matching the 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-content="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());
  });
});

@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>;
}

我同意数据属性(旅行者的答案)是它应该如何处理的，但是，CSS规则如下:

td.male { color: blue; }
td.female { color: pink; }

通常可以更容易地设置，特别是使用像angularjs这样的客户端库，它可以简单到:

<td class="{{person.gender}}">

只要确保内容只有一个词!或者你甚至可以映射到不同的CSS类名:

<td ng-class="{'masculine': person.isMale(), 'feminine': person.isFemale()}">

为了完整起见，下面是数据属性方法:

<td data-gender="{{person.gender}}">

这里的大多数答案都试图提供如何编写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>

如果你使用的是Chimp / Webdriver。io，他们支持比CSS规范更多的CSS选择器。

例如，这将点击第一个包含“坏熊”字样的锚:

browser.click("a*=Bad Bear");

做这样的小过滤器:

    var searchField = document.querySelector('HOWEVER_YOU_MAY_FIND_IT')
    var faqEntries = document.querySelectorAll('WRAPPING_ELEMENT .entry')

    searchField.addEventListener('keyup', function (evt) {
        var testValue = evt.target.value.toLocaleLowerCase();
        var regExp = RegExp(testValue);

        faqEntries.forEach(function (entry) {
            var text = entry.textContent.toLocaleLowerCase();

            entry.classList.remove('show', 'hide');

            if (regExp.test(text)) {
                entry.classList.add('show')
            } else {
                entry.classList.add('hide')
            }
        })
    })

这个问题的语法看起来像Robot Framework语法。 在本例中，虽然没有用于contains的css选择器，但可以使用SeleniumLibrary关键字来代替。 Wait Until元素包含。

例子:

Wait Until Element Contains  | ${element} | ${contains}
Wait Until Element Contains  |  td | male

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

我发现属性选项是你最好的选择，如果你不想使用javascript或jquery。

例如，在HTML中，用ready来样式所有的表格单元格:

 <td status*="ready">Ready</td>

然后在css中:

td[status*="ready"] {
        color: red;
    }

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

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

a:has(> img)

引用:

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

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

如果你想对你想要的内容应用样式。简单的技巧。 Td{边框:1px纯黑色;｝ Td:空{背景:石灰;｝ Td:empty::after{内容:"male";｝ <表> < tr > 彼得< td > < / td > < td > < !——男——> < / td > < td > 34道明> < / < / tr > < tr > < td > Susanne td > < / 女性< td > < / td > < td > 14道明> < / < / tr > 表> < /

https://jsfiddle.net/hyda8kqz/

所有这些都是很好的答案，但我认为我可以添加一些在实际场景中对我有用的东西:利用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;
}

从技术上讲，这与使用数据属性解决方案是一样的，但如果你不是网站的作者，这也适用于你，而且这不是一些专门为支持此用例而设计的过时解决方案;它本身是相当常见的。它的一个缺点是，实际上不能保证您想要的元素将具有此属性。