对于包含特定文本的元素是否有CSS选择器？

我正在为下表寻找CSS选择器：

Peter    | male    | 34
Susanne  | female  | 12

是否有任何选择器匹配所有包含“男性”的TDs？

如果我读取正确，则没有

---

可以在元素上匹配元素中属性的名称和元素中命名属性的值。但是，我看不到任何元素中匹配内容的内容。

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

您必须使用

男性

或

女性

值向名为

数据性别

的行添加数据属性，并使用属性选择器：

HTML:

---

看起来他们在考虑CSS3规范，但是没有成功

：contains（）

CSS3选择器

使用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];
}

公共静态IWebElement FindByText（此IWebDriver驱动程序，字符串文本）
{
var list=driver.FindElement（由.CssSelector（“#risk addresslist”）；
var元素=（（IJavaScriptExecutor）driver）.ExecuteScript（string.Format（“var x=$（参数[0]））.find（\”：contains（“{0}”）\”）；return x；”，text），list）；
返回（（System.Collections.ObjectModel.ReadOnlyCollection）元素）[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";
}

for（变量i=0；i

您可以将内容设置为数据属性，然后使用，如下所示：


/*选择每个包含单词“male”的单元格*/
td[data content=“male”]{
颜色：红色；
}
/*选择从“p”开始的每个单元格，不区分大小写*/
td[数据内容^=“p”i]{
颜色：蓝色；
}
/*选择包含“4”的每个单元格*/
td[数据内容*=“4”]{
颜色：绿色；
}

彼得
男性的
34
苏珊娜
女性的
14
@voyager关于使用
数据-*
属性（例如
data-gender=“female | male”
的回答是截至2017年最有效且符合标准的方法：

[data-gender='male'] {background-color: #000; color: #ccc;}

几乎大多数目标都可以实现，因为有一些虽然有限但面向文本的选择器。是可以对元素的第一个字母应用有限样式的。除了明显地选择元素的第一行（例如段落）之外，还有一个伪元素这也意味着CSS显然可以用来扩展现有的功能，为textNode的特定方面设置样式

在这样的宣传成功并得到实施之前，我可以建议的下一个最好的方法是使用空格消除器将
分解
/
拆分
单词，在
span
元素中输出每个单词，然后如果单词/样式目标是可预测的，则结合使用：

我同意（旅行者的回答）应该如何处理它，但是CSS规则如下：

td.male{颜色：蓝色；}
td.female{颜色：粉红色；}

通常可以更容易地设置，尤其是使用客户端LIB，如angularjs，其简单程度如下：

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



只需确保内容仅为一个单词！或者您甚至可以使用以下命令映射到不同的CSS类名：

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



为完整起见，以下是数据属性方法：

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

这里的大多数答案都试图提供如何编写HTML代码以包含更多数据的替代方案，因为至少在CSS3之前，您无法通过部分内部文本选择元素。但这是可以做到的，您只需要添加一点普通JavaScript，注意，由于女性也包含男性，因此将选择：


cells=document.querySelectorAll（'td'）；
控制台日志（单元格）；
[]forEach.call（单元格、函数（el）{
如果（el.innerText.indexOf（“男性”）！=-1）{
//el.click（）；单击或任何其他选项
控制台日志（el）
}
})；

彼得
男性的
34
苏珊娜
女性的
14
如果您使用的是/，则它们比CSS规范更重要

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

执行如下小筛选器小部件：

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

还可以与以下表格单元一起使用并设置其样式：


th:：在{content:attr（数据值）}之后
td:：在{content:attr（数据值）}之后
td[数据值]：非（：空）{
颜色：紫红色；
}

​；
​；
这个问题的语法看起来像机器人框架语法。
在本例中，虽然没有css选择器可用于包含，但有一个Se
<td class="{{person.gender}}">

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

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

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

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

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

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

a:has(> img)