我同意数据属性(旅行者的答案)是它应该如何处理的，但是，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}}">

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

HTML:

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

CSS:

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

我同意数据属性(旅行者的答案)是它应该如何处理的，但是，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}}">

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

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

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

然后在css中:

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

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

例子:

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

做这样的小过滤器:

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