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

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

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

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

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

如果你想对你想要的内容应用样式。简单的技巧。 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/

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

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

a:has(> img)

引用:

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

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

做这样的小过滤器:

    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')
            }
        })
    })

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

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