我正在寻找下表的CSS选择器:

Peter    | male    | 34
Susanne  | female  | 12

是否有任何选择器来匹配所有包含“男性”的td ?


当前回答

做这样的小过滤器:

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

其他回答

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

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

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

然后在css中:

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

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

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

如果有多个元素,它将返回第一个元素因为在我的例子中,它总是一个元素。

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

使用jQuery:

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